Jquery UI可拖拽和放置 - 示波器

從閱讀幾個簡單的問題看來，好像我的問題可能是DOM元素不能有多個JQuery UI Droppable 範圍。我想知道是否有人可以證實這一點，或者可能提出一種解決方法？Jquery UI可拖拽和放置 - 示波器

比如我有我想要的清單上放置兩個拖拽元素：

<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

來源

2013-08-07 WheretheresaWill

相關：http://stackoverflow.com/questions/11066497/jquery-ui -drag-droppable-with-multiple-scopes – alxndr

See this FIDDLE

基本上，你只能輕鬆擁有一個範圍。然而，droppable的drop方法允許你通過傳入2個屬性event和ui來訪問被拖動的元素。

所以如果你只使用一個分支功能，更改爲：

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

你可以看到任何一個可拖動的下降有其ID警告。幾乎然後你可以做任何你需要把數據道具或者其他每個拖曳的元素，並與訪問他們做：

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

來源

2013-08-07 15:22:32 Rooster

感謝您的迴應，我明白了您的觀點，並以類似的方式使用了drop事件。儘管附加兩個不同範圍的放置區域以允許附加不同的「activeClass」和「hoverClass」屬性會很有用。有解決方法，但這隻會讓事情變得更加困難。如果這是不可能的，那就足夠公平了......我仍然想知道'scope'的真正目的是什麼。 – WheretheresaWill

@WheretheresaWill基本上，我認爲範圍的目的是防止沒有拖放範圍的可拖動對象放在它上面。例如，假設你有一個季度，一個鎳，一個美元鈔票和一個可投資的投幣口。您可以將硬幣和投幣槽的範圍設置爲「硬幣」之類的東西，將美元鈔票設置爲「紙」之類的東西。這樣硬幣就可以掉到插槽上，但是如果你試圖放棄美元鈔票，這是不可能的，因爲範圍不匹配。事實上，不設定美元賬單的範圍也是一樣的。 – Rooster

Jquery UI可拖拽和放置 - 示波器

回答

相關問題