Jquery UI 可拖放 - 作用域

Question

通过阅读几个简单的问题，似乎我的问题可能是一个 DOM 元素不能有多个 JQuery UI Droppable scope。我想知道是否有人可以证实这一点或者建议解决方法？

例如，我有两个要拖放到列表中的可拖动对象:

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

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

这是我的例子中的一个 fiddle ；非常感谢任何帮助: Fiddle here

Answer 1

See this FIDDLE

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

所以如果你只使用一个 drop 函数并将其更改为:

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

您可以看到被拖放的任何可拖动对象都有其 id 提醒。然后，您几乎可以通过将数据 Prop 或任何东西放在每个可拖动元素上并通过以下方式访问它们来做任何您需要做的事情:

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