有谁知道如何让这个jquery sortable example跨不同的窗格工作? ...表示每个可排序列表位于不同的窗格中。我无法拖动窗格。我为我的窗格使用ui layout。jQuery的可排序列表跨越不同的窗格
非常感谢!
有谁知道如何让这个jquery sortable example跨不同的窗格工作? ...表示每个可排序列表位于不同的窗格中。我无法拖动窗格。我为我的窗格使用ui layout。jQuery的可排序列表跨越不同的窗格
非常感谢!
刚刚得到它!哇,非常棘手。
我的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和位置改变。
是的,这很接近,但在这个例子中,视觉不会横跨窗格拖动。我刚刚得到它,但我会发布。 – 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内,它们应该没有区别。
是的,如果它们在不同的div中,它应该没有什么区别......“窗格”只是将视觉关闭。 – RayLoveless
窗格您的意思是浏览器窗口?如果没有,我认为你需要使用'connectWith'把两者放在一起 –
如果你看看UI布局,你可以看到他们创建了不同的“窗格”。至少他们称之为......我需要每个列表都在不同的“窗格”中。 – RayLoveless