how to make a div draggable and droppable

Question

One thing left in my project was to make the two divs draggable and droppable simultaneously. Now I have the working code of divs that can be dragged and dropped but for example I can drag a div from target area and drop it on users area but I cant seem to figure out a way to drag those divs from users and assign to different users.

$(document).ready(function(){
    $(".dragable").draggable({
        cancel: "a.ui-icon",
        revert: true,
        helper: "clone",
        cursor: "move",
        revertDuration: 0
    });

    $('.droppable').droppable({
        accept: ".dragable",
        activeClass: "ui-state-highlight",
        drop: function( event, ui ) {
            // clone item to retain in original "list"
            var $item = ui.draggable.clone();
            $(this).addClass('has-drop').append($item);
        }
    });
});

http://jsfiddle.net/coder880/TpbZk/31/

when you say "assign", do you mean to move the divs instead of copying them? — Gavriel, Jan 29 '16 at 13:40
@Gavriel i want to drag the div(clone of the div) from target and drop it on user(single or multiple) and then if user wants he can drag a div from user1 and drop it on user 2 or 3 or 4 or anyother and vicerversa. — Coder, Jan 29 '16 at 13:45
no no just the clone of the div should be assigned to different user — Coder, Jan 29 '16 at 13:46
I understand that you clone from the target area to a user, but you also want to clone from user1 to user2, and not move it from user1 to user2. Right? — Gavriel, Jan 29 '16 at 13:47
@hetasbo, man its working good but there are two problems here. 1) The target div should only drop the clone of it, it shouldn't disappear from the target column. 2)In your fiddle i'm able to drop only one div at a particular user i want to drop multiple divs also — Coder, Jan 29 '16 at 13:50
@Gavriel, i'm sorry if i'm not so clear, when i drag from a user to a user than it should be moved and when i drag from target then it should be cloned. — Coder, Jan 29 '16 at 13:52

Rory McCrossan · Accepted Answer · 2016-01-29T14:04:24.593

The issue is because once the item is dragged/dropped it is then cloned. This clone does not have the draggable() plugin instantiated on it. You need to call draggable() on the $item again. Try this:

var draggableOptions = {
    cancel: "a.ui-icon",
    revert: true,
    helper: "clone",
    cursor: "move",
    revertDuration: 0
}

$(".dragable").draggable(draggableOptions);

$('.droppable').droppable({
    accept: ".dragable",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
        var $item = ui.draggable.clone();
        $item.draggable(draggableOptions);
        $(this).addClass('has-drop').append($item);
    }
});

Updated fiddle

it should only be cloned when its from target otherwise it should move it.

To achieve this you need to remove the helper: 'clone' option in the cloned draggable element and maintain a flag on the element to determine whether it is a brand new clone or has been dragged previously and moved again. To do this you could use a class, something like this:

$(".dragable").draggable({
    cancel: "a.ui-icon",
    revert: true,
    helper: "clone",
    cursor: "move",
    revertDuration: 0
});

$('.droppable').droppable({
    accept: ".dragable",
    activeClass: "ui-state-highlight",
    drop: function(event, ui) {
        var $item = $(ui.draggable)
        if (!$item.hasClass('clone')) {
            $item = $item.clone().addClass('clone');
            $item.draggable({
                cancel: "a.ui-icon",
                revert: true,
                cursor: "move",
                revertDuration: 0
            });
        }
        $(this).addClass('has-drop').append($item);
    }
});

Example fiddle

ok thats the best, one thing, when i drag from users it should not be cloned. how could i do this? it should only be cloned when its from target otherwise it should move it. — Coder, Jan 29 '16 at 13:54
He wants to move the divs from user to user, this is just half solution — Gavriel, Jan 29 '16 at 13:54
i removed the helper clone option form $item.draggable($mycustomvariable) but its not working fine. — Coder, Jan 29 '16 at 13:58
To achieve that you need to change the logic so that you can recognise which element is a brand new clone and which has been dropped before and moved again. See my update for more detail. — Rory McCrossan, Jan 29 '16 at 13:59

how to make a div draggable and droppable

1 Answers1