Jquery UI 可拖放 - 范围

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 可以移动到列表中，从而触发第二个警报。

似乎使用作用域只会导致拖放之间的冲突，并且不能像我预期的那样工作......如果它不能像这样工作那么scope 参数的目的是什么?

这是我的例子的一个小提琴；非常感谢任何帮助： 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 都会被提醒。然后，您几乎可以做任何您需要做的事情，方法是在每个可拖动元素上放置 data-props 或其他任何内容并使用以下方式访问它们：

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