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时，拖动事件应委托给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。

Answer 1

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

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

如果您不想使用扩展名，也许可以考虑依靠用户一次只能拖动一件事的怪癖；因此可以将数据存储在全局变量中（如果只是将其存储在浏览器中）。那就是我要做的：）

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

1 个答案: