如何在 JavaScript 中捕获 dragend 事件？答案

【问题标题】：How to catch dragend event in JavaScript?如何在 JavaScript 中捕获 dragend 事件？
【发布时间】：2026-02-11 20:40:01
【问题描述】：

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

这是我的代码：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"); });

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable

【解决方案1】：

尝试使用dragstop 而不是dragend

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

【讨论】：

这是文档中写的正确用法：api.jqueryui.com/draggable
在 jQuery 文档中，是的，但为什么 jQuery 不使用 'dragend' 事件，据我所知，这是在 HTML5 标准中，而 'dragstop' 不是？
@JonCarter 因为 javascript 的标准委员会是一群杂乱无章的疯子，他们一时心血来潮地实施规范并匆匆完成。jQuery 一直致力于最大限度地提高生产力和消除各种缺陷和差异的方法在由于这种文化而出现的实现中。总而言之，dragstart 和dragstop 是逻辑命名约定。事实上，我通过谷歌搜索 jQuery dragstart dragstop 找到了这个答案，因为我不知道事件的名称是什么，需要仔细检查。

【解决方案2】：

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

在jQuery UI中，调用.draggable();后，当用户停止拖动光标时，触发的事件变为：dragstop。 (Small demo showing that dragstop no longer works when .draggable() isn't called.)

文档...

JavaScript - dragend：在 google 上搜索这个会产生大约 100,000 个搜索结果，所以这很可能是您将使用的。来源：MDN Web Docs: Document: dragend Event

jQuery UI - dragstop：截至 2020 年 8 月，在 Google 上搜索“jQuery UI Dragstop”只会产生 5,000 个搜索结果。我几乎找不到任何提及它，但它就在那里在 Official jQuery UI Documentation: Draggable Widget。

【讨论】：