Question

从阅读几个简单的问题看起来好像我的问题可能是DOM元素不能有多个JQuery UI Droppable 范围。我想知道是否有人可以证实这一点，或者可能建议一个解决方法？

例如，我有两个可拖动的内容，我想放在列表中：

<ol>
  <li>one
  </li>
  <li>two
  </li> 
  <li>three
  </li>
  <li>four
  </li> 
</ol>

<div id="drag">drag me1
</div>
<div id="drag2">drag me2
</div>

有没有办法根据哪个元素被拖到列表上来分配两个不同的结果（在这个例子中这是微不足道的，但在现实生活中我有一组更复杂的列表和元素）？

在这个例子中我有：

$('#drag').draggable({scope: "one"});
$('#drag2').draggable({scope: "two"});

$('ol li').droppable({scope: "one", drop: function(){ alert("one");}})
$('ol li').droppable({scope: "two", drop: function(){ alert("two");}})

但只有drag1可以移到列表上，导致第二次警报被触发。

似乎使用范围只是导致拖放之间的冲突而且不能像我期望的那样工作......如果它不能像这样工作那么{{1}的目的是什么参数？

这是我的例子中的一个小提琴;任何帮助非常感谢： Fiddle here

Answer 1

See this FIDDLE

基本上，您只能轻松拥有一个范围。但是，droppable的drop方法允许您通过传入2个属性，event和ui来访问被拖动的元素。

所以如果你只使用一个drop功能并将其改为：

$('ol li').droppable({drop: function(event, ui){ alert($(ui.draggable).prop('id'));}})

你可以看到丢弃哪个可拖动的ID被警告。您可以通过在每个可拖动元素上放置数据道具或任何内容并使用以下内容访问它们来做任何您需要做的事情：

$(ui.draggable)._jquery-method_();

Jquery UI可拖动和可放置 - 范围

1 个答案: