拖拽建站 php

// 示例代码：检查CSS样式冲突
<style>
  .draggable-component {
    width: 100px;
    height: 100px;
    background-color: red;
  }
</style>

<div class="draggable-component">拖拽组件</div>

// 示例代码：优化JavaScript拖拽功能
document.addEventListener('DOMContentLoaded', function() {
  var draggable = document.querySelector('.draggable-component');
  var offsetX, offsetY;

  draggable.addEventListener('mousedown', function(event) {
    offsetX = event.clientX - draggable.getBoundingClientRect().left;
    offsetY = event.clientY - draggable.getBoundingClientRect().top;
    document.addEventListener('mousemove', onMouseMove);
    document.addEventListener('mouseup', onMouseUp);
  });

  function onMouseMove(event) {
    draggable.style.left = event.clientX - offsetX + 'px';
    draggable.style.top = event.clientY - offsetY + 'px';
  }

  function onMouseUp() {
    document.removeEventListener('mousemove', onMouseMove);
    document.removeEventListener('mouseup', onMouseUp);
  }
});