# 页面-组件-自由拖放

可应用于座位布置等
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>座位表</title>
<style>
  .seat {
    width: 50px;
    height: 50px;
    background-color: #ccc;
    margin: 5px;
    display: inline-block;
    cursor: pointer;
    position: absolute;
  }
  .locked {
    background-color: #999;
  }
</style>
</head>
<body>

<h2>座位表</h2>

<div id="seatMap">
  <!-- 这里是你的座位 -->
</div>

<script>
  let isDragging = false;
  let currentSeat = null;

  // 创建座位的函数
  function createSeat(id, top, left) {
    const seat = document.createElement('div');
    seat.classList.add('seat');
    seat.dataset.id = id;
    seat.style.top = top + 'px';
    seat.style.left = left + 'px';
    seat.addEventListener('click', toggleLock);
    seat.addEventListener('mousedown', startDrag);
    return seat;
  }

  // 切换锁定状态的函数
  function toggleLock(event) {
    const seat = event.target;
    seat.classList.toggle('locked');
  }

  // 开始拖放
  function startDrag(event) {
    isDragging = true;
    currentSeat = event.target;
    const rect = currentSeat.getBoundingClientRect();
    offsetX = event.clientX - rect.left;
    offsetY = event.clientY - rect.top;
  }

  // 结束拖放
  function endDrag() {
    isDragging = false;
  }

  // 拖动时更新座位位置
  function drag(event) {
    if (isDragging && currentSeat) {
      currentSeat.style.top = (event.clientY - offsetY) + 'px';
      currentSeat.style.left = (event.clientX - offsetX) + 'px';
    }
  }

  // 生成座位表
  function generateSeatMap(numSeats) {
    const seatMap = document.getElementById('seatMap');
    for (let i = 1; i <= numSeats; i++) {
      // 初始位置设定为(i * 60, 50)，以50px为间距
      const seat = createSeat(i, i * 60, 50);
      seatMap.appendChild(seat);
    }
  }

  // 生成一个简单的座位表，座位数为10
  generateSeatMap(10);

  // 添加拖放事件监听器到整个文档
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', endDrag);
</script>

</body>
</html>
← 首页-模板文字-转-头像 →