0

我正在尝试将项目拖放到 MVC 应用程序中，从那里拖动div到另一个应用程序div- 这div将调用一个发布事件，传入data-id.

我对 jQuery 编码比较陌生，所以我可能会遗漏一些非常愚蠢的东西......

代码

<div id="column1" style="width: 400px; background-color: rgba(255, 0, 0, 1)">
    <ul style="list-style-type: none;">
        <li data-id="1">
            <a href="#">
                <img src="http://placehold.it/200x200" />
            </a>
        </li>
    </ul>
</div>
<div id="column2" style="width: 400px; background-color: black">
    <ul>
        <li>
            <a href="#">
                <img src="http://placehold.it/200x200" />
            </a>
        </li>
    </ul>
</div>
<script>
    $("#column li").draggable({
        revert: true,
        drag: function () {
            $(this).addClass("active");
            var a = $(this).closest("#column").addClass("active");
        },
        stop: function () {
            $(this).removeClass("active").closest("#column1").removeClass("active");
        }
    });
</script>

以上工作正常，它确实会拖动 - 但是我的问题是下降。任何具有包含Column应接受 drop 的 ID 的东西，我都尝试复制上述内容以进行 drop，但我什至没有收到警报...

$("#column").droppable({
    tolerance: "touch",
    drop: function (event, ui) {
        alert('Hello World');
        var targetColumn = $(this),
            move = ui.draggable,
            itemId = move.attr("data-id");
        $.post("Controller/Action", { id: itemId, obj: move });
    }

});

有什么建议吗？

谢谢。

4

1 回答 1

0

您的代码可能无法正常运行，因为您的选择器不匹配任何元素（您没有带有 id 的元素#column）。

您可能想要设置一个类列并绑定到它draggable并用作选择器droppable。.column

HTML：

<div id="column1" class="column" style="width: 400px; background-color: rgba(255, 0, 0, 1)">
    <ul style="list-style-type: none;">
        <li data-id="1"> <a href="#">
                <img src="http://placehold.it/200x200" />
            </a>

        </li>
    </ul>
</div>
<div id="column2" class="column" style="width: 400px; background-color: black">
    <ul>
        <li> <a href="#">
                <img src="http://placehold.it/200x200" />
            </a>

        </li>
    </ul>
</div>

jQuery：

$(document).ready(function () {
    $(".column li").draggable({
        revert: true,
        drag: function () {
            $(this).addClass("active");
            var a = $(this).closest("#column").addClass("active");
        },
        stop: function () {
            $(this).removeClass("active").closest("#column1").removeClass("active");
        }
    });

    $(".column li").droppable({
        tolerance: "touch",
        drop: function (event, ui) {
            alert('Hello World');
            console.log($(this))

        }

    });
});

演示：http: //jsfiddle.net/IrvinDominin/CASn4/

于 2013-09-04T12:10:12.940 回答