在两个<ul> JS之间拖动<li> (不带jQuery)

var draggableElement = document.getElementById('draggable');

draggableElement.addEventListener('mousedown', dragStart);

function dragStart(event) {
  // 记录鼠标按下时的初始位置
  var initialX = event.clientX;
  var initialY = event.clientY;

  // 添加事件监听器，监听鼠标移动和释放动作
  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', dragEnd);

  // 阻止默认的拖动行为
  event.preventDefault();

  // 拖动过程中的操作
  function drag(event) {
    // 计算鼠标移动的距离
    var deltaX = event.clientX - initialX;
    var deltaY = event.clientY - initialY;

    // 更新元素的位置
    draggableElement.style.left = draggableElement.offsetLeft + deltaX + 'px';
    draggableElement.style.top = draggableElement.offsetTop + deltaY + 'px';
  }

  // 拖动结束时的操作
  function dragEnd() {
    // 移除事件监听器
    document.removeEventListener('mousemove', drag);
    document.removeEventListener('mouseup', dragEnd);
  }
}