kéo lồng và thả sử dụng jquery ui

Question

Để Thả mục vào mục giảm

<table id='list1' > 
</table> 

<ul id="list2" > 
</ul> 

<table id='list3' > 
<tr><td>test<ul style="min-height: 100px;border:1px solid red" class="drop-container"></ul></td></tr> 
</table> 

Tôi đã mã sau

$("#list3 li").draggable({ 
      connectToSortable: "#list2", 
      helper: "clone", 
      revert: "invalid" 
}); 
$("#list1 li").draggable({ 
     connectToSortable: "#list2", 
     helper: "clone", 
     revert: "invalid", 
     greedy: true 
}); 

Làm thế nào tôi có thể thả mục list1 thành List2 trực tiếp và thẻ ul Layout List2 của mà sẽ đến từ list3 bằng cách kéo và thả API của jquery?

Fiddle: http://jsfiddle.net/bhumi/nkvzdwk9/1/

Answer 1

Vì vậy, những gì bạn muốn đạt được có thể được tóm tắt như thế này

Bước 1: Kéo và thả một số Layout (đó là bên li tag) #list3-#list2.

Bước 2: Kéo và thả một số phương tiện truyền thông (mà cũng là bên trong li thẻ) từ #list1-#list2 trực tiếp và cũng có thể tag ul #list2 Layout của .drop-container mà bây giờ đã được kéo đến #list2.

Hiện tại, bạn đang giảm #list1 li vào #list 2, nhưng nó phải được thả vào .drop-container of #list2 hoặc #list2 (nếu bạn muốn thêm #list li-#list2 trực tiếp)

nên #list1 li nên được kết nối với .drop-container of #list2 và #list2

$("#list1 li").draggable({ 
    connectToSortable: "#list2 .drop-container,#list2",//both element should be connected 
    helper: "clone", 
    revert: "invalid", 
    greedy: true 
}); 

Sau đó, cần thêm sortable API vào .drop-container of #list2 o nly sau #list2 đã nhận được một số Layout từ #list3 của

Vì vậy, gọi sortable trên #list2 .drop-container bên nhận phương pháp sortable của list2. Bây giờ bạn nhận được chức năng của #list2 trở thành

receive: function (event, ui) { 
     console.log(ui); 
     console.log(event); 
     var this_id = $(ui.item).attr("id"); 
     var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, ''); 

     $(itemContext).attr("id", this_id); 
     $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto'); 
     $(itemContext).html(preview); 

//Modified code starts here, the sortable should be added here 

     $("#list2 .drop-container").sortable({//call sortable to every element which you want to drop to. 
      connectWith: "#list1", 
      over: function() { 
       removeIntent = false; 
      }, 
      out: function() { 
       removeIntent = true; 
      }, 
      beforeStop: function (event, ui) { 
       itemContext = ui.item.context; 
       if (removeIntent == true) { 
        ui.item.remove(); 
        disp($("#list2").sortable('toArray')); 
       } 
       //console.log(itemContext); 

      }, 
      receive: function (event, ui) { 
       console.log(ui); 
       console.log(event); 
       var this_id = $(ui.item).attr("id"); 
       var preview = $(itemContext).html().replace(/<!--/g, '').replace(/-->/g, ''); 

       $(itemContext).attr("id", this_id); 
       $(itemContext).css("width", $('#list2').width() - 20).addClass("ui-state-default").height('auto'); 
       $(itemContext).html(preview); 

       //console.log(this_id); 
       //console.log(preview); 

      } 
     }); //.disableSelection() 

    //end of modified code 

     //console.log(this_id); 
     //console.log(preview); 

    } 
}); 

WORKING DEMO, full code