jQuery的可排序列表跨越不同的窗格

有誰知道如何讓這個jquery sortable example跨不同的窗格工作？ ...表示每個可排序列表位於不同的窗格中。我無法拖動窗格。我爲我的窗格使用ui layout。jQuery的可排序列表跨越不同的窗格

非常感謝！

2011-08-31 RayLoveless

窗格您的意思是瀏覽器窗口？如果沒有，我認爲你需要使用'connectWith'把兩者放在一起 –

如果你看看UI佈局，你可以看到他們創建了不同的「窗格」。至少他們稱之爲......我需要每個列表都在不同的「窗格」中。 – RayLoveless

剛剛得到它！哇，非常棘手。

我的JS：

$(document).ready(function() { 
$('body').layout({ applyDefaultStyles: true }); 

$("#sortable1").sortable({ 
    helper: function (e, ui) { return $(ui.get(0)).clone().appendTo('body').css('zIndex', 5).show();}, 
    connectWith: ".connectedSortable", 
    receive: function (e, ui) { alert("sort 1 recieved an item... update Database.") } 
}).disableSelection(); 

$("#sortable2").sortable({ 
    helper: function (e, ui) { return $(ui.get(0)).clone().appendTo('body').css('zIndex', 5).show(); }, 
    connectWith: ".connectedSortable", 
    receive: function (e, ui) { alert("sort 2 recieved an item... update Database.") } 
}).disableSelection(); 

$("#sortable3").sortable({ 
    helper: function (e, ui) { return $(ui.get(0)).clone().appendTo('body').css('zIndex', 5).show(); }, 
    connectWith: ".connectedSortable", 
    receive: function (e, ui) { alert("sort 3 recieved an item... update Database.") } 
}).disableSelection();

}）;

HTML：

<BODY> 
<DIV class="ui-layout-center"> 
    <div> 
     <div class="casted-and-potential-content"> 
      <div class="casted-content content" style=""> 
       <div><b>Casted Talent for Role</b></div> 
       <ul id="sortable1" class="connectedSortable"> 
        <li class="ui-state-default11 bob">Item 1</li> 
        <li class="ui-state-default12">Item 2</li> 
        <li class="ui-state-default13">Item 3</li> 
        <li class="ui-state-default14">Item 4</li> 
        <li class="ui-state-default15">Item 5</li> 
       </ul> 
      </div> 
      <div class="potential-content content" style=""> 
       <div><b>Potential Talent for Role</b></div> 
       <ul id="sortable2" class="connectedSortable">ffff 
        <li class="ui-state-default21">Item 21</li> 
        <li class="ui-state-default22">Item 22</li> 
        <li class="ui-state-default23">Item 23</li> 
        <li class="ui-state-default25">Item 24</li> 
        <li class="ui-state-default26">Item 25</li> 
       </ul> 
      </div> 
     </div> 
    </div> 
</DIV> 
<DIV class="ui-layout-south" style="margin:0px !important;background:none repeat scroll 0 0 #E7E6E2 !important;"> 
    <div class="rejected-content" style="padding:10px 20px 10px 20px;background:none repeat scroll 0 0 #E7E6E2 !important;"> 
     <div><b>Rejected Talent for Role</b></div> 
      <ul id="sortable3" class="connectedSortable"> 
       <li class="ui-state-default31">Item 31</li> 
       <li class="ui-state-default32">Item 32</li> 
       <li class="ui-state-default33">Item 33</li> 
       <li class="ui-state-default34">Item 34</li> 
       <li class="ui-state-default35">Item 35</li> 
      </ul> 
    </div> 
</DIV> 
</BODY>

在需要的DOM項目的Z-index和位置改變。

來源

2011-08-31 18:12:19 RayLoveless

謝謝你，我遇到了同樣的問題 – madprops

優秀。有同樣的問題，你的解決方案就像一個冠軍！謝謝。 –

謝謝，很高興幫助。 – RayLoveless

我認爲他們工作正常。

看看這裏：

http://jsfiddle.net/trmr9/

來源

2011-08-31 17:12:33

是的，這很接近，但在這個例子中，視覺不會橫跨窗格拖動。我剛剛得到它，但我會發布。 – RayLoveless

我想你只是想念這個：helper：function（e，ui）{return $（ui.get（0））。clone（）。appendTo（'body'）。css（'zIndex'，5）.show （）;}， – RayLoveless

使用您sortables的connectWith選項會得到你想要的東西。

$('#firstList').sortable({connectWith : '#otherList'});

on one。

$('#otherList').sortable({connectWith : '#firstList'});

另一方面。

如果它們在不同的包含DIV內，它們應該沒有區別。

來源

2011-08-31 17:17:27

是的，如果它們在不同的div中，它應該沒有什麼區別......「窗格」只是將視覺關閉。 – RayLoveless

jQuery的可排序列表跨越不同的窗格

回答

相關問題