原生javascript相当于jQuery.draggable()

Native javascript equivalent to jQuery.draggable()

本文关键字：draggable jQuery javascript 相当于 原生      更新时间：2023-09-26

是否有一个本地javascript代码相当于jQuery的可拖拽?我不需要所有的功能，但是

  1. 能够从句柄中拖动模态窗口。
  2. 在开始和结束事件，因为我需要做一个叠加层，同时拖动以防止鼠标位于模态窗口内的iframe上。
  3. 文件中只有一个可拖动的项目。

使用事件dragstart和dragend。将模态的位置与鼠标的x和y坐标相关联

有HTML5和api，但因为没有人喜欢它的任何方式和旧的浏览器都不支持它，我想说你找到了一个很好的解决方案，jQuery

虽然这个问题说的是原生JavaScript，但考虑到@Moe Sweet评论说jQuery 是启用的，我将做出回应。

拖放是特定的事件链。这并不难，但可能很有挑战性。

简单地说，拖放是以下步骤/事件:

  1. 鼠标按下，可以拖动
  2. 鼠标移动，继续拖动
  3. 鼠标停止，不能拖动

简单的解决方案是使用这些事件:mousedown, mousemove和mouseup 

$(anElement).mousedown(foodown);
function foodown(){
  $(window).mousemove(foomove).mouseup(fooup);
  //stuff
}
function foomove(){
  //stuff
}
function fooup(){
  //stuff
  $(window).unbind('mousemove', foomove).unbind('mouseup', fooup);
}

需要注意的一点是，mousedown之后的事件需要绑定到window，以便在鼠标被按住时离开原始元素时捕获它们。

代码的"东西"部分是你需要检查元素的屏幕坐标与鼠标的屏幕坐标并适当移动东西的地方。移动只在mousemove事件期间是真正必要的，因为鼠标不会在mouseup或mousedown事件中移动。

有一个类似的问题，我张贴了我的jQuery代码。dragondrop插件。

使用看起来比jQuery更干净的HTML5方法:

<div draggable="true"
  ondragstart="event.dataTransfer.setData('text/plain', '12345')">
drag me
</div>
<div ondragover="return false;" 
  ondrop="this.innerHTML=event.dataTransfer.getData('text/plain')">
drop on me
</div>
相关文章：