原生javascript等同于jQuery.draggable（）

Question

是否存在与jQuery可拖动等效的原生javascript代码？ 我不需要所有功能，但

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

Answer 1

使用活动dragstart和dragend。绑定与鼠标的x和y坐标相关的模态位置。

Answer 2

有HTML5 dnd api，但是由于没有人以任何方式喜欢它，并且没有一个旧的浏览器支持它，我会说你在jQuery中找到了一个很好的解决方案。

Answer 3

虽然问题陈述了原生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，以便在按住鼠标时鼠标离开原始元素时会捕获它们。 / p>

代码中的“东西”部分是您需要检查元素的屏幕坐标与鼠标的屏幕坐标并适当移动的位置。仅在mousemove事件期间才需要动作，因为鼠标不会移动mouseup或mousedown事件。

There is a similar question where I posted my code for a jQuery.dragondrop plugin

Answer 4

使用看似比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>