jquery.top-droppable是一款非常实用的jQuery UI拖拽拖放插件。在演示的demo中，我们集成了一个非常棒的提示插件 SweetAlert，用于显示提示信息。
使用方法
要使用这个拖拽拖放插件，首先要在页面的头部引入 jQuery 和 jQuery UI 以及 jquery.top-droppable.js 文件
<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery-ui.js"></script>
<script src="/path/to/jquery.top-droppable.js"></script>
HTML结构
每一个用于拖放目的地div都设置class为top-droppable，并分别给它们设置一个z-index值。
<div id="1" class="top-droppable" style="z-index: 1;"></div>
<div id="2" class="top-droppable" style="z-index: 2;"></div>
方法和事件
使用这个拖放插件非常简单，选择你的拖放目的地元素，为它调用topDroppable方法，然后监听drop事件。drop事件将会在拖拽元素时被触发，并提供一个指向最前端拖放目的地元素的引用this。参数 e 和 ui 的用法和原生的jQuery ui的用法是一样的。
$(".top-droppable").topDroppable({
drop: function (e, ui) {
alert("dropped into " + $(this).attr('id'));
}
});
使用jQuery ui的droppable选项和参数
你可以以链式编程的方式来设置所有的jQuery UI原生参数和事件。
$(".top-droppable").topDroppable({
drop: function (e, ui) {
alert("dropped into " + $(this).attr('id'));
}
}).droppable({
tolerance: "pointer"
});
注意：不要使用原生的
drop 方法。获取拖动时的最前端目的地容器
你可以通过下面的方法来获取拖动时的最前端目的地容器。
$.getTopElement();
获取拖动元素时当前鼠标悬停的目的地容器
你可以通过下面的方法来获取拖动元素时当前鼠标悬停的目的地容器。
$.getCurrentHoveredElements();
