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