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

时间:2015-05-15 07:38:55

标签: javascript jquery drag event-delegation

我的页面上有以下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。

1 个答案:

答案 0 :(得分:0)

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

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

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