2

从阅读几个简单的问题看来，我的问题可能是一个 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

4

1 回答 1

2

看到这个小提琴

基本上，您只能轻松拥有一个范围。但是，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_();
于 2013-08-07T15:22:32.580 回答