jQuery UI拖拽拖放插件jquery.top-droppable

当前位置:主页 > jQuery库 > 布局和界面 > jQuery UI拖拽拖放插件jquery.top-droppable
jQuery UI拖拽拖放插件jquery.top-droppable
分享:

    插件介绍

    jquery.top-droppable是一款非常实用的jQuery UI拖拽拖放插件。该拖拽拖放插件可以将元素拖动到指定的容器中,如果容器是堆叠的,它还能知道到底是拖放到哪个容器中。

    浏览器兼容性

    浏览器兼容性
    时间:2015-01-14
    阅读:
简要教程

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。参数 eui 的用法和原生的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"
});
                
获取拖动时的最前端目的地容器

你可以通过下面的方法来获取拖动时的最前端目的地容器。

$.getTopElement();
                
获取拖动元素时当前鼠标悬停的目的地容器

你可以通过下面的方法来获取拖动元素时当前鼠标悬停的目的地容器。

$.getCurrentHoveredElements();
                

更多详细信息请参考:https://github.com/vaceta/jquery-top-droppable