1

ユーザーをロールにドラッグできるドラッグアンドドロップを実行しています。ユーザーIDとターゲットロールIDを取得する方法は知っていますが、ユーザーがドラッグされた場所でロール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>

よろしくお願いします。

4

2 に答える 2

3

startイベントをフックして、最も近いものを取得します.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
    }
});

ドロップ時にその情報が必要な場合dataは、startイベントでを使用して要素に保存し、ドロップ時に取得できます。

于 2012-12-07T09:26:09.977 に答える
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');
    }
});
于 2012-12-07T09:26:22.523 に答える