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

在两个JS之间拖动（不带jQuery）可以通过使用原生JavaScript的事件和方法来实现。

首先，需要为要拖动的元素添加事件监听器，以便在拖动开始时触发相应的操作。可以使用mousedown事件来监听鼠标按下的动作。

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);
  }
}

上述代码中，我们首先获取要拖动的元素（假设其id为draggable），然后为其添加mousedown事件监听器。在dragStart函数中，我们记录鼠标按下时的初始位置，并添加mousemove和mouseup事件监听器来监听鼠标移动和释放的动作。

在drag函数中，我们计算鼠标移动的距离，并更新元素的位置，实现拖动效果。最后，在dragEnd函数中，我们移除事件监听器，以结束拖动。

这样，当鼠标按下并移动时，元素将跟随鼠标移动，直到释放鼠标按钮为止。

注意：以上代码仅为示例，实际应用中可能需要根据具体情况进行适当的调整和优化。

推荐的腾讯云相关产品和产品介绍链接地址：