Jquery UI Droppable: Wie kann ich verschiedene HoverClass-Werte basierend auf einer Logik verwenden?

Question

Ich verwende die Bibliotheksfunktionen JQuery UI droppable, und ich möchte visuelle Benutzerfeedback bereitstellen, wenn sie über ein abwerfbares Ziel schweben. Dazu kann ich einfach die Option hoverClass verwenden, um anzugeben, welche Klasse verwendet werden soll, wenn ein ziehbares Objekt über dem Objekt liegt.

Aber was ich tun möchte, ist ein anderer hoverClass Wert je nach Logik. Grundsätzlich gibt es eine Reihe von Bereichen, die "droppable" sind, und es gibt eine Reihe von Elementen, die per Drag & Drop verschoben werden können. Es können jedoch nicht alle Elemente in allen Bereichen gelöscht werden. So hätte ich zum Beispiel einen grünen Hintergrund, wenn der Tropfen gültig ist, und einen roten Hintergrund, wenn der Tropfen ungültig ist.

Wie kann das gemacht werden? Ich weiß, welche Logik ich verwenden möchte, aber wo kann ich die Logik hinzufügen. Es muss offensichtlich irgendwo sein, dass ich auf das Element zugreifen kann, das gezogen wird, und auf das potentielle Drop-Zielelement.

Mein einfachen Code so weit ist wie folgt:

$(".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 
    } 
}); 

Dies sollte es tun. On wird das Ereignis für alle .DropItem-Elemente ausgelöst. Sie können hier mehr über die verfügbaren Ereignisse API finden: http://api.jqueryui.com/droppable/

Answer 2

Ich denke, das Problem mit der Klasse zu tun versucht, sich, wenn abwerfbaren seine eigene Hover Veranstaltung, die so genannte overjQuery droppable API #over

So würden Sie wollen :

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

Answer 3

Die anderen Antworten sind genau das, wonach ich gesucht habe. Ich möchte hier jedoch ein wenig näher darauf eingehen, um ein besseres Beispiel für die Verarbeitung der Logik zu geben.

Sagen wir zum Beispiel, mit ein paar einfachen HTML wie folgt. Diese HTML hat im Grunde 4 ziehbar Objekte und 4 möglich Drop Ziele:

<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> 

Wie habe ich verwendet, gesehen werden kann data-* Attribute spezifische Identifizierung Werte zu speichern. Die IDs auf dem DragItem identifizieren das Ziehobjekt und die IDs auf dem DropItem enthalten alle gültigen Werte.

Das JavaScript, das diese Logik verarbeitet, und wendet dann die richtigen Klassen ist wie folgt:

$(".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"); 
    } 
}); 

Wie man sehen kann, ich bin eine einfache tun Logik-Check „ist Zeichenfolge enthalten“. Dies ist für kleine Zahlen in Ordnung, aber wenn mehr als 9 Objekte benötigt werden, benötigen wir eine zuverlässigere Zeichenfolge im DropItem-Wert data-id.

Ich verwende auch die out und deactivate Ereignisse, um die angewandten Klassen zu klären. In diesem Beispiel kopiere ich den Code, aber dies könnte leicht durch eine einzige Funktion ersetzt werden, die von beiden Ereignissen verwendet wird.

Schließlich ist der Moment, den Sie alle gewartet haben, here is a working example.

Answer 4

die Ziehbare Start/Stopp-Ereignisse verwenden, um Klassen zu Ihrem Dropzones hinzufügen und entfernen.

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