我的页面上有以下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。
答案 0 :(得分:0)
可能不是。就个人而言,它对我不起作用,经过一番挖掘后,我发现有人为此扩展人员提供了帮助来解决该扩展问题:https://www.bitovi.com/blog/delegate-able-drag-drop-events-for-jquery
我怀疑与原始事件是受信任事件有关,因此我们无法修改其内容。
如果您不想使用扩展名,也许可以考虑依靠用户一次只能拖动一件事的怪癖;因此可以将数据存储在全局变量中(如果只是将其存储在浏览器中)。那就是我要做的:)