javascript实现dom元素可拖动

要实现DOM元素可拖动，需要以下步骤：

1. 给目标元素添加mousedown事件监听器，当鼠标按下时触发事件，并将鼠标在元素上的位置信息存储起来。

2. 给document对象添加mousemove事件监听器，当鼠标移动时触发事件，并计算出移动的距离。

3. 在mousemove事件中，根据鼠标移动的距离，重新设置目标元素的位置。

4. 当鼠标松开时，移除事件监听器。

以下是实现DOM元素可拖动的示例代码：

<!-- HTML结构 -->
<div id="draggable">可拖动的元素</div>

// JavaScript代码
var draggable = document.getElementById('draggable');
var mouseX, mouseY, elementX, elementY;

draggable.addEventListener('mousedown', function(event) {
  elementX = draggable.offsetLeft;
  elementY = draggable.offsetTop;
  mouseX = event.pageX - elementX;
  mouseY = event.pageY - elementY;
  document.addEventListener('mousemove', handleMouseMove);
  document.addEventListener('mouseup', handleMouseUp);
});

function handleMouseMove(event) {
  draggable.style.left = (event.pageX - mouseX) + 'px';
  draggable.style.top = (event.pageY - mouseY) + 'px';
}

function handleMouseUp(event) {
  document.removeEventListener('mousemove', handleMouseMove);
  document.removeEventListener('mouseup', handleMouseUp);
}

上面的代码中，首先获取了目标元素draggable的引用，然后在mousedown事件中获取元素当前的位置，并计算出鼠标在元素上的位置偏移量。然后添加mousemove和mouseup事件监听器，分别在移动和松开鼠标时触发。在handleMouseMove函数中，根据计算出的偏移量设置元素的位置。在handleMouseUp函数中，移除事件监听器。

下面是另一个实现DOM元素可拖动的示例代码：

<!-- HTML结构 -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

// JavaScript代码
var items = document.querySelectorAll('li');
var mouseX, mouseY, elementX, elementY, dragging;

for (var i = 0; i < items.length; i++) {
  var item = items[i];
  item.addEventListener('mousedown', handleMouseDown);
  item.addEventListener('mouseup', handleMouseUp);
}

function handleMouseDown(event) {
  dragging = event.target;
  elementX = event.target.offsetLeft;
  elementY = event.target.offsetTop;
  mouseX = event.pageX - elementX;
  mouseY = event.pageY - elementY;
  event.target.style.backgroundColor = '#ddd';
}

function handleMouseUp(event) {
  event.target.style.backgroundColor = '';
}

document.addEventListener('mousemove', handleMouseMove);

function handleMouseMove(event) {
  if (dragging) {
    dragging.style.left = (event.pageX - mouseX) + 'px';
    dragging.style.top = (event.pageY - mouseY) + 'px';
  }
}

上面的代码中，首先获取了所有li元素，并遍历添加mousedown和mouseup事件监听器。在handleMouseDown函数中，获取当前按下鼠标的元素，并计算出偏移量，并且给元素加上灰色背景色表明这个元素正在被拖动。在handleMouseUp函数中，通过清空背景色表示这个元素已经不再被拖动了。在handleMouseMove函数中，根据计算出的偏移量设置元素的位置。