JQuery UI: Get ID of source element in drag'n'dop

Question

I am impelemnting a drag'n'drop where you can drag users to a role. I know how I get the user ID and the target role ID but I do not know how to get the role ID where the user is dragged FROM!

<div id="role_1" class="role">
    <h5>Administrator</h5>
    <ul class="users">
        <li id="user_1">Foo</li>
        <li id="user_2">Bar</li>
    </ul>
</div>
<div id="role_2" class="role">
    <h5>Member</h5>
    <ul class="users">
        <li id="user_1337">Baz</li>
    </ul>
</div>

<script type="text/javascript">
$(function() {
    // Get roles and users lists
    var $templates = $(".role"),
        $users = $(".users");

    // let the user items be draggable
    $("li", $users).draggable({
        revert: "invalid", // when not dropped, the item will revert back to its initial position
        containment: "document",
        helper: "clone",
        cursor: "move"
    });

    // let the roles be droppable, accepting the user items
    $templates.droppable({
        accept: ".users > li",
        activeClass: "ui-state-highlight",
        drop: function(event, ui) {
            var $uid = ui.draggable.attr("id"),
                $targetRid = $(this).attr("id"),
                $sourceRid = ???;
                // snip
        }
    });
});
</script>

Thanks for your help in advance.

score 3 · Accepted Answer · answered Dec 07 '12 at 09:26

3

Hook the start event, and get the closest .role:

$("li", $users).draggable({
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move",
    start: function() {
        var role = $(this).closest(".role").attr("id");
        // Here, role is either the id or undefined if no role could be found
    }
});

If you need that information when it's dropped, you could store it on the element using data in the start event and then retrieve it when dropped.

answered Dec 07 '12 at 09:26

T.J. Crowder

1,031,962
187
1,923
1,875

2

Thanks that gave me the hint I needed... I just did `ui.draggable.closest(".role").attr("id")` in the droppable's drop event ;) – Hikaru-Shindo Dec 07 '12 at 09:40
@Hikaru-Shindo: Ah, yes, of course. Nice one! Because that's so different from my answer, you might want to post it as your own answer and (in two day's time) accept it. That's perfectly fine here on SO. Your call, though, of course. In any case, glad to have helped! – T.J. Crowder Dec 07 '12 at 09:43
@T.J.Crowder, may I ask you to take a look at a jQuery draggable and droppable related question here : https://stackoverflow.com/questions/54498364/jquery-drag-and-drop-simulation-does-not-work-for-the-last-draggable ? – Istiaque Ahmed Feb 03 '19 at 19:22

score 2 · Answer 2 · answered Dec 07 '12 at 09:26

I think you need to remember this id when you start the drag event:

var srcId;
$("li", $users).draggable({
    revert: "invalid", // when not dropped, the item will revert back to its initial position
    containment: "document",
    helper: "clone",
    cursor: "move",
    start: function( event, ui ) {
        srcId = $(this).closest(".role").attr('id');
    }
});

JQuery UI: Get ID of source element in drag'n'dop

2 Answers2