当前位置：首页 > 网页特效 > 其他

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

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

要使用这个拖拽拖放插件，首先要在页面的头部引入 jQuery 和 jQuery UI 以及 jquery.top-droppable.js 文件
```html
<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值。

```html
<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的用法是一样的。

```html
$(".top-droppable").topDroppable({
    drop: function (e, ui) {
     alert("dropped into " + $(this).attr('id'));
    }
});
```
使用jQuery ui的droppable选项和参数
你可以以链式编程的方式来设置所有的jQuery UI原生参数和事件。

```html
$(".top-droppable").topDroppable({
    drop: function (e, ui) {
     alert("dropped into " + $(this).attr('id'));
    }
}).droppable({
    tolerance: "pointer"
});
```
**注意：不要使用原生的 drop 方法。**
获取拖动时的最前端目的地容器
你可以通过下面的方法来获取拖动时的最前端目的地容器。

```html
$.getTopElement();
```
获取拖动元素时当前鼠标悬停的目的地容器
你可以通过下面的方法来获取拖动元素时当前鼠标悬停的目的地容器。

```html
$.getCurrentHoveredElements();
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果