javascript - 将拖动事件委托(delegate)给其他元素 jQuery

Question

我的页面上有以下 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时，拖动事件应该委托(delegate)给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 .

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

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

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

Answer 1

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

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

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