将拖动事件委托给其他元素 jQuery答案

【问题标题】：Delegate drag event to other element jQuery将拖动事件委托给其他元素 jQuery
【发布时间】：2015-05-15 07:38:54
【问题描述】：

我的页面上有以下 html：

<div class="group-one" >
    <p><span id="handle" draggable="true">::</span> click me</p>
</div>

<div class="group-two" draggable="true">
    <p>I should be dragged</p>
</div>

现在我想要的是，当#handle 被拖动时，拖动事件应该委托给div.group-two，移动光标下的元素也应该是div.group-two。这是我尝试过的：

$('#handle').mousedown(function(e){
    $('.group-two').trigger(e);
});

$('#handle').on('dragstart', function(e){
    $('.group-two').trigger(e);
});

$('.group-two').on('dragstart', function(e){
    console.log('dragestart triggered on group-two');
});

$('.group-two').mousedown(function(e){
    console.log("mousedown triggered on group-two");
});

这是jsfiddle。

这里的问题是，虽然事件被委托给div.group-two，但是在移动光标下被拖动的元素仍然是span#handle。

现在我的问题是，是否可以以这种方式委派拖动？如果是，那么任何提示如何实现它。

请注意，我使用的是普通 jQuery 而不是 jQuery UI。

【问题讨论】：

标签： javascript jquery drag event-delegation

【解决方案1】：

可能不会。就我个人而言，它对我不起作用，经过一番挖掘后，我发现有人制作了这个扩展来帮助解决它：https://www.bitovi.com/blog/delegate-able-drag-drop-events-for-jquery

我怀疑它与 originalEvent 是可信事件有关，因此我们无法修改其内容。

如果您不想使用扩展程序，也许可以考虑依靠用户一次只能拖动一件东西的怪癖；因此将数据存储在全局变量中（如果它只是在浏览器中）将起作用。这就是我要做的:)

【讨论】：