Jquery UI Droppable: How can I use different hoverClass values based on some logic?

Question

I am using the JQuery UI droppable library features, and I want to provide visual user feedback when they hover over a droppable target. For this I can easily use the hoverClass option to specify which class to use when they have a draggable item hovering over.

But what I want to do is use a different hoverClass value depending on some logic. Basically, there are a number of areas that are "droppable", and there is a number of items that can be dragged and dropped - however, not all items can be dropped on all areas. So I would like to have, for example, a green background if the drop is valid, and a red background if the drop is invalid.

How can this be done? I know what logic I want to use, but where can I add the logic. It obviously needs to be somewhere I can access the element being dragged, and the potential drop target element.

My simple code so far is as follows:

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

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

This doesn't directly answer your question, but sounds right for your use case - have you looked at using the `scope`/`accept` options to assign certain draggables to certain droppables? Then you wouldn't need logic to determine hoverClass - it would only get assigned when the draggable accepts the droppable. — freejosh, Mar 05 '13 at 14:17
@freejosh: I don't think this would allow me to specify a class for "invalid" drops though. Got my answer now anyway :D — musefan, Mar 05 '13 at 14:49

score 3 · Accepted Answer · answered Mar 05 '13 at 14:14

3

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

This should do it. On over that event will be triggered on all .DropItem elements. You can find more about the available events API here: http://api.jqueryui.com/droppable/

answered Mar 05 '13 at 14:14

lucassp

4,133
3
27
36

And how do I change the `hoverClass` in this `over` event? – musefan Mar 05 '13 at 14:22
1

$(this).addClass('someClass'); based on the logic inside the event listener. But make sure you use the activate or deactivate event listeners to reset class names. – lucassp Mar 05 '13 at 14:24
So you mean, on `over` I add the class myself. Then on `out` I can remove the class? OK, I see, you are suggesting I don't worry about `hoverClass` at all. Ill give it a try and report back – musefan Mar 05 '13 at 14:24
All done, thanks! I have posted my own answer to offer a bit more information for future visitors (and future me) – musefan Mar 05 '13 at 14:47

score 2 · Answer 2 · answered Mar 05 '13 at 14:18

2

I think your issue is trying to do it with the class itself, when droppable has its own hover event, called over jQuery droppable API #over

So you'd want:

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

answered Mar 05 '13 at 14:18

Matt Fletcher

8,182
8
41
60

Thanks, this is what I needed. You will have to settle for just the upvote though as @lucassp been you to it :P – musefan Mar 05 '13 at 14:48
Haha, I know- he with the fastest fingers! Thanks :) – Matt Fletcher Mar 05 '13 at 14:54

score 2 · Answer 3 · answered Mar 05 '13 at 14:46

The other answers are exactly what I was looking for. However, I want to go into a bit further detail here to give a better example of how to process the logic.

Lets say for example, with have some simple HTML as follows. This HTML basically has 4 draggable objects, and 4 possible drop targets:

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

As can be seen, I have used data-* attributes to store specific identifying values. The IDs on the DragItem identify the drag object, and the IDs on the DropItem contain all valid values.

The javascript that processes this logic, and then applies the correct classes is as follows:

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

As can be seen, I am doing a simple "does string contain" logic check. This is fine for small numbers but if there is ever a need to do more than 9 object we would need a more reliable string in the DropItem data-id value.

I also use the out and deactivate events to clear up the applied classes. In this example I duplicate the code, but this could easily be replaced with a single function used by both events.

Finally, the moment you have all been waiting for, here is a working example.

score 0 · Answer 4 · answered Mar 18 '13 at 21:19

0

Use the Draggable Start/Stop events to add and remove classes to your dropzones.

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

answered Mar 18 '13 at 21:19

Ryan Allen

5,414
4
26
33

Jquery UI Droppable: How can I use different hoverClass values based on some logic?

4 Answers4