Strefa zrzutu jQuery w strefie zrzucania

Question

Mam zrzucaną, nieuporządkowaną listę o nazwie <ul class="droppable">. Wewnątrz listy nieuporządkowanej są dynamicznie generowane elementy listy o nazwach <li class="placeholder"></li>, które również można zrzucić.

Podczas upuszczania elementu przeciągalnego między jako symbolu zastępczego, wszystko działa poprawnie. Ale podczas upuszczania elementu, który można przeciągnąć na samej <li class="placeholder"></li>, przeciągany element zostaje dołączony do listy symboli zastępczych i nieuporządkowanych.

Otrzymuję podwójny klon tego.

Here's a jsfiddle mieć wizualny przykład. Jestem świadomy, że logiczne jest, że otrzymuję podwójny klon na mojej stronie, ale nie wiem jak to wyłączyć ...

Każda pomoc jest bardzo ceniona!

AKTUALIZACJA: Jeśli przeciągniesz element, który można przeciągnąć w pionie nad elementem zrzucanym, zostaną one automatycznie dodane? Jak to możliwe?

Answer 1

Jednym ze sposobów rozwiązania tego problemu może być przeniesienie wszystkich zachowań na numer sortable i użycie tylko droppable, aby dokonać przełączenia w celu określenia pożądanego zachowania. W ten sposób możesz obsłużyć wszystko w jednym miejscu, co powinno rozwiązać niektóre niepożądane efekty związane z posiadaniem zarówno tych samych elementów, jak i sortable i droppable. W ten sposób:

W swojej droppable ustawiasz przełącznik over i out i ustawiasz potrzebne obiekty.

$("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) { 

       } 

      }); 

Następnie w beforeStop przypadku sortable, sprawdzić, czy zmienna overSortable jest prawdziwe, czy nie i ustawić tam zachowań. Wszystko, co odnosi się do ui.draggable, this i event.target będą musiały zostać zastąpione przez obiekty, które ustawiłeś jako droppable. Lepszym rozwiązaniem byłoby utworzenie funkcji obsługującej wszystkie te zachowania i przekazanie jej jako argumentów.

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') 
       } 

Istnieje jeszcze adjusments zrobić, to nie jest do końca jasne, co dokładnie powinno się wydarzyć i kiedy, ale może to ułatwić pracę zamiast próbować zarządzać wiele zdarzeń wyrzuceniu kiedy upuść element, tylko ty zarządzać jednym.

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

Answer 2

udało się uzyskać go pracy dla Ciebie:

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", ""); 

UWAGA:var dragging = ui.draggable.find("img"); ta linia robił ci zduplikowane kopie w przeciągnij i upuść, więc po prostu trzeba usunąć clone();.

utworzyła klony z przeciągniętymi przedmiotami w dest.

Teraz Zauważ to:

$("#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'); 

     } 

    }); 

} 

coś z klasą zastępczego powoduje ci kłopotów.

Mam nadzieję, że to pomoże.