Question

我尝试将项目拖放到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 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 });
    }

});

有什么建议吗？

感谢。

Answer 1

您的代码可能效果不佳，因为您的选择器与任何元素都不匹配（您没有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/

jQuery draggable和droppable调用MVC动作

1 个答案: