Jquery UI Droppable: Jak mogę używać różnych wartości hoverClass na podstawie pewnej logiki?

Question

Używam funkcji bibliotecznych JQuery UI droppable i chcę zapewnić wizualną informację zwrotną od użytkownika po najechaniu kursorem nad zrzucanym celem. W tym celu mogę z łatwością użyć opcji hoverClass, aby określić klasę, która ma być używana, gdy element przeciągany jest najechany.

Ale chcę użyć innej wartości hoverClass w zależności od logiki. Zasadniczo istnieje wiele obszarów, które można "zrzucić", i istnieje wiele przedmiotów, które można przeciągać i upuszczać - jednak nie wszystkie przedmioty można upuścić na wszystkich obszarach. Tak więc chciałbym mieć na przykład zielone tło, jeśli kropla jest ważna, i czerwone tło, jeśli kropla jest nieważna.

Jak można tego dokonać? Wiem, jakiej logiki chcę użyć, ale gdzie mogę dodać logikę. Oczywiście musi być gdzieś, gdzie mogę uzyskać dostęp do przeciąganego elementu i potencjalnego elementu docelowego upuszczania.

mój prosty kod do tej pory jest w następujący sposób:

$(".DragItem").draggable({ 
    revert: true, 
    helper: "clone" 
}); 

$(".DropItem").droppable({ 
    tolerance: "touch", 
    hoverClass: "DropTargetValid" 
}); 

Answer 1

$(".DropItem").droppable({ 
    tolerance: "touch", 
    hoverClass: "DropTargetValid", 
    over: function(event, ui) { 
     console.log(ui.draggable); // the draggable object 
     console.log($(this)); // the droppable object 
    } 
}); 

To powinno wystarczyć. Po przekroczeniu tego zdarzenia zostanie uruchomione na wszystkich elementach .DropItem. Możesz znaleźć więcej informacji na temat dostępnych wydarzeń API tutaj: http://api.jqueryui.com/droppable/

Answer 2

Myślę, że problemem jest stara się zrobić to z samej klasie, kiedy droppable posiada własne zdarzenia najechania, zwany overjQuery droppable API #over

Więc czego chcesz :

$(".DropItem").droppable({ 
    tolerance: "touch", 
    over: function(event, ui) { 
     // ... logic goes here 
    } 
}); 

Answer 3

Inne odpowiedzi są dokładnie tym, czego szukałem. Chciałbym jednak przedstawić nieco więcej szczegółów, aby dać lepszy przykład przetwarzania logiki.

Powiedzmy na przykład, że mamy prosty HTML w następujący sposób. To w zasadzie ma 4 HTML można przeciągać obiekty i 4 możliwe cele drop:

<div style="margin-bottom:20px;"> 
    <div data-id="1" class="DragItem">I am 1</div> 
    <div data-id="2" class="DragItem">I am 2</div> 
    <div data-id="3" class="DragItem">I am 3</div> 
    <div data-id="4" class="DragItem">I am 4</div> 
</div> 
<div> 
    <div data-id="123" class="DropItem">I accept 1, 2 and 3</div> 
    <div data-id="23" class="DropItem">I accept 2 and 3</div> 
    <div data-id="34" class="DropItem">I accept 3 and 4</div> 
    <div data-id="1234" class="DropItem">I accept all</div> 
</div> 

Jak widać, Użyłem data-* atrybutów do przechowywania określonych wartości identyfikujące. Identyfikatory DragItem identyfikują obiekt przeciągania, a identyfikatory DropItem zawierają wszystkie prawidłowe wartości.

javascript, który przetwarza tę logikę, a następnie stosuje się właściwe zajęcia się następująco:

$(".DragItem").draggable({ 
    revert: true, 
    helper: "clone" 
}); 

$(".DropItem").droppable({ 
    tolerance: "touch", 
    over: function (event, ui) { 
     var dropItem = $(this); 
     var dragItem = $(ui.draggable); 
     var valid = String(dropItem.data("id")).indexOf(dragItem.data("id")) > -1; 
     if (valid) { 
      dropItem.addClass("DropTargetValid"); 
     } else { 
      dropItem.addClass("DropTargetInvalid"); 
     } 
    }, 
    out: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    }, 
    deactivate: function (event, ui) { 
     var dropItem = $(this); 
     dropItem.removeClass("DropTargetValid"); 
     dropItem.removeClass("DropTargetInvalid"); 
    } 
}); 

Jak widać, robie proste „ma zawierać ciąg” check logiczny. Jest to dobre dla małych liczb, ale jeśli kiedykolwiek zajdzie potrzeba zrobienia więcej niż 9 obiektów, potrzebowalibyśmy bardziej niezawodnego ciągu w wartości DropItem data-id.

Używam również zdarzeń out i deactivate, aby wyczyścić zastosowane klasy. W tym przykładzie duplikuję kod, ale można go łatwo zastąpić jedną funkcją używaną przez oba zdarzenia.

Wreszcie, w chwili, gdy wszyscy czekali, here is a working example.

Answer 4

Użyj zdarzenia Draggable Start/Stop, aby dodawać i usuwać zajęcia do dropzones.

http://api.jqueryui.com/draggable/#event-start