Geek asks and answers

JQuery UI Droppable: how can I use different hoverClass values ​​based on some logic?

I use the features of the jQuery UI droppable library , and I want to provide visual feedback to users when they are hovering over an object with the ability to be deleted. For this, I can easily use a parameter hoverClassto indicate which class to use when they have a draggable element that hangs.

But I want to use a different value hoverClassdepending on some logic. Basically, there are several areas that are “inaccessible,” and there are many items that you can drag and drop — however, not all items can be deleted in all areas. Therefore, I would like to have, for example, a green background if the fall is valid, and a red background if the fall is not valid.

How can I do that? I know what logic I want to use, but where can I add logic. Obviously, this should be somewhere where I can access the element being dragged and the target element of a potential drop.

My simple code so far looks like this:

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

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

. .DropItem. API : http://api.jqueryui.com/droppable/

+3

, , droppable hover, over jQuery droppable API #over

, :

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

- , . , , , .

, , HTML . HTML 4 4 :

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

, data-* . DragItem , DropItem .

javascript, , :

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

, "does string contains". , 9 , DropItem data-id.

out deactivate, . , , .

, , , .

+2

Draggable Start/Stop .

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

0

More articles:


All Articles