如何在JavaScript中捕获dragend事件？

Question

我正在尝试使用JavaScript捕获可拖动DIV的dragend事件。为什么根本没有触发dragend事件？如何解决这个问题？PS，我正在使用jQuery UI 1.9.2中的.draggable（）方法。

这是我的代码：http://jsfiddle.net/vBMav/ HTML:

<div id="divId"> ... </div>

CSS（层叠样式表）：

#divId {
    background-color: #000000;
    color: #ffffff;
    height: 200px;
    width: 200px;
}

Javascript:

$('#divId').draggable(); 

$('#divId')
    .bind('dragstart', function(){ $("#divId").text("drag start"); })
    .bind('drag',      function(){ $("#divId").text("dragging");   })
    .bind('dragend',   function(){ $("#divId").text("drag ended"); });

- Ashraf Bashir

Answer 1

尝试使用dragstop代替dragend

.bind('dragstop',   function(){ $("#divId").text("drag ended");});

- Jacob

---

这是文档中正确的使用方法：http://api.jqueryui.com/draggable/ - Jacob

在jQuery文档中，的确如此，但为什么jQuery不使用“dragend”事件呢？据我所知，“dragend”是HTML5标准中的事件，而“dragstop”则不是。 - Jon Carter

@JonCarter 因为JavaScript标准委员会是一群不负责任的疯子，他们随意实现规范并匆忙通过。jQuery一直致力于最大化生产力，并消除由此文化引起的各种缺陷和不一致之处。总之，dragstart和dragstop是逻辑命名约定。事实上，我通过谷歌搜索“jQuery dragstart dragstop”找到了这个答案，因为我不知道事件的名称并需要进行双重检查。 - r3wt

Answer 2

在JavaScript和jQuery中，当用户停止拖动光标时触发的事件是: `dragend`。

在jQuery UI中，在调用`.draggable();`之后，当用户停止拖动光标时触发的事件变为：`dragstop`。（小演示，显示未调用.draggable()时dragstop不再起作用。）

文档...

JavaScript - `dragend`：搜索谷歌会产生约100,000个搜索结果，所以这可能是您要使用的内容。来源：MDN Web Docs：Document: dragend 事件

jQuery UI - dragstop: 搜尋 "jQuery UI Dragstop" 在2020年8月時只有5,000個Google搜尋結果。我幾乎找不到任何提及它的資訊，但在官方jQuery UI文件：可拖曳小工具中確實有提到。

- HoldOffHunger