Vùng có thể phân tách jQuery trong vùng có thể phân tách

Question

Tôi có một danh sách có thứ tự không thể phân loại có tên là <ul class="droppable">. Bên trong danh sách không có thứ tự, tôi có các mục danh sách được tạo động được đặt tên là <li class="placeholder"></li>, cũng có thể phân đoạn.

Khi thả mục có thể kéo giữa trình giữ chỗ, tất cả đều hoạt động tốt. Nhưng khi thả một mục có thể kéo trên chính bản thân <li class="placeholder"></li>, mục có thể kéo được thêm vào phần giữ chỗ và danh sách không theo thứ tự.

Vì vậy, tôi nhận được bản sao đôi của nó.

Here's a jsfiddle để có ví dụ trực quan. Tôi biết rằng hợp lý là tôi nhận được bản sao đôi trên trang của mình, nhưng tôi không biết cách vô hiệu hóa nó ...

Bất kỳ trợ giúp nào được đánh giá cao!

CẬP NHẬT: Nếu bạn kéo một mục có thể kéo thẳng đứng trên phần tử có thể di chuyển, chúng tự động nối thêm? Làm thế nào là có thể?

Answer 1

Một cách tiếp cận bạn có thể cố gắng giải quyết điều này là chuyển tất cả hành vi của mình sang sortable và chỉ sử dụng droppable để thực hiện chuyển đổi để xác định hành vi bạn cần. Bằng cách đó, bạn có thể xử lý mọi thứ ở một nơi, điều này sẽ giải quyết một số hiệu ứng không mong muốn của việc có cả hai số sortable và droppable trên cùng một yếu tố. Như thế này:

Trong ống dẫn của bạn, bạn đặt công tắc trên over và out và đặt các đối tượng bạn cần.

$("li.placeholder").droppable({ 

       accept: "li.to-drag", 
       hoverClass: "correct", 
       activeClass: "active", 
       revert: false, 
       tolerance: "pointer", 
       over: function (e, ui) { 
        curDrag = ui.draggable; 
        curTarget = e.target; 
             curThis = $(this); 
        overSortable = true; 
       }, 
       out: function (e, ui) { 
        overSortable = false; 
       }, 

       drop: function (event, ui) { 

       } 

      }); 

Sau đó, trong trường hợp beforeStopsortable, bạn kiểm tra xem biến overSortable là đúng hay không và thiết lập các hành vi đó. Tất cả những gì đề cập đến ui.draggable, this và event.target sẽ cần phải được thay thế bằng các đối tượng mà bạn đặt ở chế độ có thể phân tách. Một sự kiện tốt hơn sẽ là làm cho một hàm xử lý tất cả các hành vi này và chuyển chúng thành các đối số.

beforeStop: function (e, ui) { 
       if (overSortable) { 
        curDrag.addClass('placeholder'); 
        var dragging = curDrag.find("img").remove(); 

        curThis.append(dragging).addClass("dropped"); 
        curThis.droppable('disable'); 

        var day = curDrag.attr('data-id'); 
        var index = $(curTarget).index(); 

        //... 

       } else { 
        ui.item.addClass('placeholder') 
       } 

Vẫn còn adjusments để thực hiện, nó không phải là hoàn toàn rõ ràng chính xác những gì nên xảy ra và khi nào, nhưng điều này có thể làm cho nó dễ dàng hơn để làm việc thay vì cố gắng để quản lý nhiều sự kiện được kích hoạt khi bạn thả một yếu tố, bạn chỉ quản lý một.

http://jsfiddle.net/ts290vth/4/

Answer 2

Quản lý để làm cho nó làm việc cho bạn:

function dropping() { 

     $("li.placeholder").droppable({ 

      accept: "li.to-drag", 
      hoverClass: "correct", 
      activeClass: "active", 
      revert: false, 
      tolerance: "pointer", 

      drop: function (event, ui) { 

       var dragging = ui.draggable.find("img"); 

       $(this).append(dragging).addClass("dropped"); 
       $(this).droppable('disable'); 

       var day = $(ui.draggable).attr('data-id'); 
       var index = $(event.target).index(); 

       $(this).attr("data-id", day); 
       $(this).attr("date-order", index); 
       $(this).addClass("drop-"+ index); 
       $(this).attr("data-content", ""); 

THÔNG BÁO: các var dragging = ui.draggable.find("img"); dòng này đã làm cho bạn bản sao trùng lặp tại kéo và thả vì vậy bạn chỉ có để loại bỏ các clone();.

nó đã tạo bản sao các mục đã kéo của bạn tại đích.

Bây giờ Chú ý này:

$("#dropzone").droppable({ 

     accept: "li.to-drag", 
     revert: false, 
     tolerance: "pointer", 

     drop: function (event, ui) { 

      $(this).append(dragging); 
      //$("li.to-drag").addClass("placeholder"); 
      $(this).droppable('disable'); 

     } 

    }); 

} 

Something với lớp giữ chỗ đang gây ra những rắc rối bạn.

Hy vọng điều này sẽ hữu ích.