jquery-ui 之droppable详解
<div class="special">drop me</div>
<div class="drag-box">
<div class="selector">
<p>Drag me around</p>
<a class="test">notDrag me</a>
</div>
</div>
$(function() {
$(".special").droppable(); /*启用元素的拖拽功能*/
$('.selector').draggable();
});
首先 droppable 是和 draggable配套使用的。 droppable 主要是对 draggable 移动的目标进行设定的。
(一)具体参数的解释:
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以下的版本.
jquery-ui 之droppable详解的更多相关文章
- atitit.jQuery Validate验证框架详解与ati Validate 设计新特性
atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...
- jQuery Validate验证框架详解
转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...
- jQuery的deferred对象详解
jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...
- jQuery的deferred对象详解(转载)
本文转载自: jQuery的deferred对象详解(转载)
- 触碰jQuery:AJAX异步详解
触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...
- jQuery调用AJAX异步详解[转]
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- jQuery的deferred对象详解(一)
最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...
- 触碰jQuery:AJAX异步详解(转)
AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和X ...
- 【转】jQuery Validate验证框架详解
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...
- jQuery form插件使用详解
点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...
随机推荐
- AAC ADTS AAC LATM 格式分析
http://blog.csdn.net/tx3344/article/details/7414543# 目录(?)[-] ADTS是个啥 ADTS内容及结构 将AAC打包成ADTS格式 1.ADTS ...
- Scrapy在win7 32位的安装及依赖包
Scrapy,一个网络爬虫的框架,首先第一步肯定是安装. 参考网上的文章. 安装过程中需要用到pip工具,请自行安装. 1.安装python 这个是必须的,既然都用到scrapy了,肯定已经安装了py ...
- Unity NGUI弧形血条的制作
unity版本:4.6 NGUI版本:3.6. (转载请注明参考链接及作者) 参考链接:http://www.cnblogs.com/louissong/p/3841656.html,作者:博客园 L ...
- poj2400Supervisor, Supervisee(KM)
http://poj.org/problem?id=2400 KM算法http://philoscience.iteye.com/blog/1754498 题意:每个雇主对雇员有个满意度 雇员对雇主有 ...
- POI 中Cell的backgroundcolor和foregroundcolor
刚开始以为要获得cell的背景色是使用 getFillBackgroundColor()这个函数(这里返回的是调色板的索引,要获得RGB需要先获得系统的Pallete,然后在获得 RGB).结果出来 ...
- OWIN katana注册中间件的几种写法
首先特别说明下在startup中注册完中间件的两个注意事项,看到有人写的东西有误导人的作用.关于startup启动发现类的内容,参照这里 http://www.asp.net/aspnet/overv ...
- [swustoj 856] Huge Tree
Huge Tree(0856) 问题描述 There are N trees in a forest. At first, each tree contains only one node as it ...
- varchar与nvarchar的区别
nvarchar可变长度的Unicode字符数据 varchar可变长度且非 Unicode 的字符数据 举例: varchar(1) --可以插进入一个数字或者一个字母,如果要插入一个汉字改为v ...
- WCF HTTPS配置
昨天需要把做好的一个wcf服务发布到服务器站点下的一个虚拟目录中发布过程遇到了一个问题:服务器上的环境是https,因此需要多对配置文件修改于是在网上找啊找,遇到一个问题找一个问题,可是问题依然没解决 ...
- HDU 5874 Friends and Enemies 【构造】 (2016 ACM/ICPC Asia Regional Dalian Online)
Friends and Enemies Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Othe ...