C# jQuery可拖放调用MVC操作

我尝试将项目拖放到MVC应用程序中，从

div

拖动到另一个

div

-此

div

将调用post事件，传递

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

有什么建议吗

---

谢谢。

您的代码可能工作不正常，因为您的选择器与任何元素都不匹配（您没有id为

#column

的元素）

您可能希望设置一个类列，并使用

.column

作为选择器绑定到它

可拖动的
和
可拖放的

HTML:

演示：

$("#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 });
    }

});

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

$(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))

        }

    });
});