jquery sortable list accross 다른 창에서

누군가가이 jquery sortable example 다른 창에서 작동하도록하는 방법을 알고 있습니까? ... 각 정렬 가능한 목록이 다른 창에 있음을 의미합니다. 나는 창을 가로 질러 끌 수 없다. 내 창에 ui layout을 사용하고 있습니다.jquery sortable list accross 다른 창에서

감사합니다.

출처

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- 인덱스 및 위치가 변경 될 수 있습니다.

출처

2011-08-31 18:12:19 RayLoveless

이 문제에 감사드립니다. 동일한 문제가 발생했습니다. – madprops

우수. 동일한 문제와 솔루션이 챔피언처럼 작동 했었습니다! 감사. –

감사합니다. 기꺼이 도와 드리겠습니다. – RayLoveless

그들은 정상적으로 작동한다고 생각합니다.

여기 봐 :

http://jsfiddle.net/trmr9/

출처

2011-08-31 17:12:33

그래, 가까운데,이 예제에서는 비주얼이 창을 가로 질러 드래그되지 않습니다. 나는 단지 그것을 얻었다. .. 나는 게시 할 것이다. – RayLoveless

난 그냥 누락 된 것 같아요 : 도우미 : function (e, ui) {return $ (ui.get (0)) .clone(). appendTo ('body'). css ('zIndex', 5) .show();}, – RayLoveless

당신이 원하는 것을 얻을 것이다 sortables에 대한 connectWith 옵션을 사용.

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

하나에.

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

다른 DIV가 포함 된 경우 차이가 발생하지 않아야합니다.

출처

2011-08-31 17:17:27

그래, 다른 div의 경우에는 차이가 없어야합니다 ... "창"이 화면을 벗어났습니다. – RayLoveless

jquery sortable list accross 다른 창에서

답변

관련 문제