可拖拽悬浮弹性菜单代码

以下是一个基于HTML、CSS和JavaScript的可拖拽悬浮弹性菜单的代码示例：

HTML代码：

<div id="menu">
  <div class="menu-item" id="item1">菜单项1</div>
  <div class="menu-item" id="item2">菜单项2</div>
  <div class="menu-item" id="item3">菜单项3</div>
  <div class="menu-item" id="item4">菜单项4</div>
</div>

CSS代码：

#menu {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

.menu-item {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  color: #333;
  cursor: pointer;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 10px;
  text-align: center;
  transition: all 0.2s ease-in-out;
}

.menu-item:hover {
  background-color: #f9f9f9;
}

.menu-item.dragging {
  opacity: 0.5;
}

.menu-item.draggable {
  cursor: move;
}

JavaScript代码：

const menu = document.getElementById('menu')
const menuItems = menu.querySelectorAll('.menu-item')
let draggingItem = null

menuItems.forEach(item => {
  item.addEventListener('mousedown', event => {
    draggingItem = event.target
    draggingItem.classList.add('dragging')
  })
})

document.addEventListener('mouseup', event => {
  if (draggingItem) {
    draggingItem.classList.remove('dragging')
    draggingItem = null
  }
})

document.addEventListener('mousemove', event => {
  if (draggingItem) {
    const x = event.clientX
    const y = event.clientY
    draggingItem.style.transform = `translate(${x}px, ${y}px)`
  }
})

这段代码创建了一个悬浮在页面右下角的菜单，菜单项可以被拖拽。当鼠标按下某个菜单项时，该菜单项会被标记为“dragging”，并且当鼠标移动时，该菜单项会随着鼠标的移动而移动。当鼠标松开时，菜单项会恢复到原来的位置。