js+css实现可拖动烤肉串效果代码-html代码-BFW代码库

代码语言：html

所属分类：拖放

代码描述：js+css实现可拖动烤肉串效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Berkshire+Swash&display=swap");

/* SVG encoded with https://cdpn.io/rrOZQQ */
:root {
	--coldSVG: url("data:image/svg+xml;charset=utf-8, %3Csvg width='70' height='70' id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E %3Cdefs%3E %3Cstyle%3E .cls-1 %7B fill: %230b0c04%3B %7D .cls-2 %7B fill: %237c7c7c%3B %7D .cls-3 %7B fill: %2344443c%3B %7D .cls-4 %7B fill: %231e1f21%3B %7D %3C/style%3E %3C/defs%3E %3Cpath class='cls-1' d='M38.58%2C89.81c1.65.51%2C3.99%2C1.24%2C6.42%2C2.34-.04-1.72.23-3.31.79-4.55-2.3%2C1.07-4.77%2C1.79-7.31%2C2.18.03%2C0%2C.06.02.09.03Z'/%3E %3Cpath class='cls-1' d='M58.85%2C64.92c.36%2C2.24.22%2C4.5-.26%2C6.65%2C2.2-2.24%2C5.22-4.21%2C8.46-6.04-3.6.45-5.98.55-8.2-.6Z'/%3E %3Cpath class='cls-1' d='M71.18.85c6.7-1.07%2C12.4%2C3%2C15.11%2C7.56.53.89.98%2C1.86%2C1.33%2C2.86%2C3.05-2.11%2C6.66-4%2C10.16-5.82.76-.4%2C1.5-.78%2C2.23-1.16V0h-29.17c-.08.34-.18.68-.31.99.22-.05.44-.1.66-.14Z'/%3E %3Cpath class='cls-1' d='M52.7%2C50.34c-1.09-.02-2.2-.21-3.3-.53-.23.63-.57%2C1.46-1.05%2C2.36%2C1.59.75%2C3.07%2C1.64%2C4.39%2C2.68-.24-1.59-.26-3.14-.04-4.51Z'/%3E %3Cpath class='cls-1' d='M33.83%2C29.92c-.53-5.02.37-10.42%2C2.5-14.19-1.9-.65-3.3-1.81-6.54-4.1%2C1.3%2C2.77%2C1.82%2C5.65%2C1.22%2C8.18-.44%2C1.88-2.93%2C4.27-7.68%2C8.13%2C3.63.29%2C7.36%2C1.21%2C10.17%2C1.9.1.03.22.05.32.08Z'/%3E %3Cpath class='cls-1' d='M87.25%2C93.67c-2.43%2C1.84-3.98%2C2.86-5.04%2C3.15-3.5.99-7.62.51-11.59-.93.4%2C1.43.49%2C2.85.21%2C4.1h29.17v-.09c-4.46-.45-9.38-2.81-12.75-6.24Z'/%3E %3Cpath class='cls-1' d='M59.23%2C21.9c2.96%2C3.32%2C7.62%2C8.56%2C7.97%2C14.24%2C2.11-2.82%2C4.65-5.52%2C7.21-7.32-7.55-1.44-15.8-7.91-15.33-15.5.2-3.22%2C1.97-6.52%2C4.72-8.95-.73.11-1.5.22-2.35.33-2.32.31-4.17.56-5.77.57.09%2C1.87-.16%2C4.29-1.61%2C6.44-.71%2C1.05-1.6%2C1.87-2.59%2C2.52%2C3%2C2.33%2C5.73%2C5.39%2C7.76%2C7.66Z'/%3E %3Cpath class='cls-1' d='M12.04%2C0H0v4.29C4.4%2C2.03%2C8.2.3%2C12.08.04c-.01-.01-.03-.03-.04-.04Z'/%3E %3Cpath class='cls-1' d='M17.43%2C90.56c1.97-1.08%2C4-1.74%2C5.99-2.13-2.65-.91-5.11-2.15-7.24-3.72-1.81-1.33-7.61-5.61-8.31-12.47-.78-7.67%2C5.24-14.65%2C11.94-18.7-4.73-4-8.28-10.55-8.7-16.02-1.79%2C1.3-3.01%2C2.05-3.89%2C2.3-2.22.63-4.69.66-7.22.23v.6c.82.16%2C1.7.34%2C2.68.53%2C4.45.9%2C6.67%2C1.35%2C8.69%2C3.02%2C3.67%2C3.04%2C5.99%2C9.09%2C3.78%2C12.47-1.33%2C2.03-4.17%2C2.41-8.69%2C3.02-2.67.36-4.71.62-6.45.55v1.89c3.78%2C3.52%2C6.27%2C8.29%2C6.24%2C12.52%2C1.73%2C1.32%2C3.15%2C2.94%2C4.16%2C4.63%2C2.77%2C4.65%2C3.23%2C11.16%2C0%2C15.87-.51.74-2.1%2C3.06-4.91%2C4.16-1.61.63-3.5.8-5.49.59v.09h12.04c-.65-.7-1-1.41-1.04-2.26-.18-3.56%2C5.05-6.43%2C6.42-7.18Z'/%3E %3Cpath class='cls-1' d='M87.03%2C36.7c2.3%2C8.15%2C1.11%2C15.04.38%2C18.13-.18.77-.39%2C1.51-.61%2C2.23%2C1.71-.15%2C3.44-.03%2C5.24.47%2C2.95.81%2C5.68%2C2.48%2C7.96%2C4.6v-1.89c-1.39-.05-2.59-.31-3.75-.93-6.36-3.38-8.1-15.34-4.16-18.51%2C1.46-1.17%2C3.76-.95%2C7.9-.15v-.6c-4.99-.84-10.17-3.47-14.02-6.92.34%2C1.08.68%2C2.27%2C1.04%2C3.56Z'/%3E %3Cpath class='cls-1' d='M53.58%2C81.69c-1.04%2C1.25-2.21%2C2.35-3.47%2C3.31%2C1.73.02%2C4.07.48%2C7.32%2C1.14-1.4-2.05-2.27-4.22-2.4-6.38-.47.7-.95%2C1.34-1.44%2C1.93Z'/%3E %3Cpath class='cls-3' d='M45%2C92.14c-2.43-1.1-4.77-1.83-6.42-2.34-.03%2C0-.06-.02-.09-.03-5.05.78-10.36.27-15.08-1.34-1.99.38-4.01%2C1.04-5.99%2C2.13-1.37.75-6.6%2C3.62-6.42%2C7.18.04.85.39%2C1.56%2C1.04%2C2.26h35.08c-1.33-2.4-2.06-5.26-2.12-7.86Z'/%3E %3Cpath class='cls-3' d='M17.04.54c5.57%2C1.53%2C10.43%2C6.12%2C12.75%2C11.09%2C3.24%2C2.29%2C4.64%2C3.45%2C6.54%2C4.1%2C1.28-2.26%2C2.99-3.95%2C5.11-4.61%2C3.3-1.04%2C6.82.63%2C10.04%2C3.13.99-.65%2C1.89-1.47%2C2.59-2.52%2C1.45-2.15%2C1.71-4.58%2C1.61-6.44-1.69.01-3.09-.23-4.43-.95-1.73-.92-3.11-2.49-4.13-4.33H12.04s.03.03.04.04c1.62-.11%2C3.25.03%2C4.95.5Z'/%3E %3Cpath class='cls-3' d='M60.96%2C58.23c-1.73-3.55-1.19-7.37.04-10.81-1.32.93-3.77%2C2.42-6.49%2C2.83-.6.09-1.2.11-1.81.1-.22%2C1.37-.2%2C2.93.04%2C4.51%2C2.42%2C1.91%2C4.31%2C4.31%2C5.37%2C7.19.35.95.59%2C1.91.74%2C2.87%2C2.22%2C1.16%2C4.6%2C1.05%2C8.2.6.45-.26.91-.51%2C1.37-.76-3.41-1.41-6.07-3.66-7.47-6.52Z'/%3E %3Cpath class='cls-3' d='M48.35%2C52.17c.47-.9.82-1.74%2C1.05-2.36-6.45-1.89-12.73-8.52-14.82-15.93-.36-1.27-.6-2.6-.75-3.96-.11-.03-.22-.05-.32-.08-2.8-.7-6.54-1.62-10.17-1.9-1.69%2C1.37-3.65%2C2.93-5.92%2C4.72-2.67%2C2.11-4.72%2C3.71-6.31%2C4.88.42%2C5.47%2C3.97%2C12.02%2C8.7%2C16.02%2C1.68-1.01%2C3.39-1.84%2C5.06-2.45%2C7.25-2.65%2C16.45-2.23%2C23.49%2C1.08Z'/%3E %3Cpath class='cls-3' d='M86.79%2C57.07c-1.05%2C3.45-2.48%2C6.37-3.92%2C8.72-5.34%2C1.12-10.42.63-14.45-1.03-.46.25-.92.51-1.37.76-3.24%2C1.84-6.26%2C3.81-8.46%2C6.04-.67%2C3.05-2.02%2C5.89-3.57%2C8.2.13%2C2.16%2C1.01%2C4.34%2C2.4%2C6.38.08.02.16.03.25.05%2C4.45.9%2C6.67%2C1.35%2C8.69%2C3.02%2C1.98%2C1.65%2C3.57%2C4.17%2C4.26%2C6.68%2C3.97%2C1.44%2C8.1%2C1.92%2C11.59.93%2C1.06-.3%2C2.61-1.31%2C5.04-3.15-2.6-2.65-4.27-5.94-4.06-9.47.34-5.57%2C5.35-11.39%2C12.09-12.47%2C1.64-.26%2C3.22-.21%2C4.71.07v-9.67c-2.28-2.12-5.02-3.8-7.96-4.6-1.8-.49-3.53-.62-5.24-.47Z'/%3E %3Cpath class=.........完整代码请登录后点击上方下载按钮下载查看