jquery - 可放置 div 上的 OnDrop 事件？

Question

我正在尝试在我的自定义 CMS 上制作拖放导航创建者菜单。我想为此事件创建一个回调函数。

1. div中有3个链接#links（只是<li><a href="#">Link</a></li>）
2. 有一个名为 div 的 div #dropzone。

我想要一个这样的回调函数：

$.("#dropzone").onDrop(function() { alert "Callback"; });

如何使用 HTML5（如果存在任何关于删除的新功能）和 jQuery 来做到这一点？一旦我得到回调，我可以自己做剩下的事情。

Answer 1

我刚刚得到这个与我的项目一起工作。对我来说，关键是告诉浏览器#dropzone使用事件处理程序接受放置事件dragover：

$("#dropzone").on("dragenter", function () {
    $(this).addClass("drop-allowed");
});
$("#dropzone").on("dragleave", function () {
    $(this).removeClass("drop-allowed");
});
$("#dropzone").on("dragover", function (e) {
    e.stopPropagation();
    e.preventDefault();
    return true;
});
$("#dropzone").on("drop", function (e) {
    e.stopPropagation();
    e.preventDefault();
    // Handle drop event here.
});

Answer 2

您可以使用 jQuery UI 提供的可拖动功能。它有一个停止事件，当元素的拖动停止时触发。通过以下链接 [http://jqueryui.com/demos/draggable/][1] 了解更多详细信息。查看可用事件的事件标签。