JQuery UI：在drag'n'dop中獲取源元素的ID

Question

我在拖動用戶拖拽角色的拖拽操作。我知道我是如何獲取用戶ID和目標角色ID的，但我不知道如何獲取用戶被拖動到的FROM角色ID！

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

感謝您的幫助提前。

Answer 1

掛鉤的start event，並獲得最接近.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 
    } 
}); 

如果你需要的信息時，它的下降，你可以把它存儲在start事件中使用data的元素，然後當檢索下降。

Answer 2

我認爲你需要，當你開始拖動事件要記住這個ID：

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'); 
    } 
});