jquery-ui|jquery-ui 之droppable详解
drop me
Drag me around
notDrag me
$(function() {
$(".special").droppable();
/*启用元素的拖拽功能*/
$('.selector').draggable();
});
首先 droppable 是和 draggable配套使用的。 droppable 主要是对 draggable 移动的目标进行设定的。
【jquery-ui|jquery-ui 之droppable详解】（一）具体参数的解释:
hoverClass: 'droppable-active',/*当一个元素被落在嵌套droppables时候，droppables增加的class类名*/
addClasses: false,/*是否添加默认的ui里面的class (class名字为ui-droppable) 值为false或是true*/
activeClass: "ui-state-highlight", /*当一个元素执行拖动事件的时候,该元素添加的class类名*/
disabled:false ,/*表示事件触发或是放弃 false或是true*/
参数的使用方法:
$(".special").droppable({
hoverClass: 'droppable-active',
addClasses: false,
activeClass: "ui-state-highlight",
disabled:false
});
(二) 具体的事件的解释:
drop: function(){/*当一个元素被落在嵌套droppables时候,执行的方法 */
},
activate:function(){/*当draggable触发的时候，执行的事件*/
},
create:function(){/*当draggable创建的时候,执行的事件*/
},
create:function(){/*当draggable停止的时候,执行的事件*/
},
out:function(){ /*当draggable进入到droppable元素内后,又离开边界的时候，执行的方法*/
},
over:function(){
/*当一个元素进入到droppables的时候,执行的方法这个方法有别于drop drop表示的是进去的时候，停止的时候执行的;
over表示的是进去的时候执行的方法*/
}
事件的使用方法:
$(".special").droppable({
drop:function(){
},
activate:function(){
},
create:function(){
},
...
});
(三) 具体的参数的使用方法:
$(".special").droppable("destroy");
/*从元素中移除拖拽功能*/
$(".special").droppable("disable");
/*禁止元素的拖拽功能*/
$(".special").droppable("enable");
/*是元素启用拖拽功能*/
注意: 1 droppable 和 draggable 是配套使用的
2 写对象的时候，最后面的一个, 不要加上,ie6 7不兼容，会报错
比如 var object = {
a:001,
b:002/*b是一个对象的最后一个元素，不能给加上, 这样会导致错误.*/
}
3 jquery 2.0以上不支持 ie 6 7 8 所以要是项目需要支持ie6 7 8的话需要引用jquery2.0以下的版本.
转载于:https://www.cnblogs.com/jiangtuzi/p/3758378.html
推荐阅读
- PMSJ寻平面设计师之现代(Hyundai）
- 太平之莲
- 闲杂“细雨”
- 七年之痒之后
- 深入理解Go之generate
- 由浅入深理解AOP
- 期刊|期刊 | 国内核心期刊之（北大核心）
- 生活随笔｜好天气下的意外之喜
- 感恩之旅第75天
- python学习之|python学习之 实现QQ自动发送消息