<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详解的更多相关文章

  1. atitit.jQuery Validate验证框架详解与ati Validate 设计新特性

    atitit.jQuery Validate验证框架详解与ati Validate 设计新特性 1. AtiValidate的目标1 2. 默的认校验规则1 2.1. 使用方式 1.metadata用 ...

  2. jQuery Validate验证框架详解

    转自:http://www.cnblogs.com/linjiqin/p/3431835.html jQuery校验官网地址:http://bassistance.de/jquery-plugins/ ...

  3. jQuery的deferred对象详解

    jQuery的deferred对象详解请猛击下面的链接 http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_ ...

  4. jQuery的deferred对象详解(转载)

    本文转载自: jQuery的deferred对象详解(转载)

  5. 触碰jQuery:AJAX异步详解

    触碰jQuery:AJAX异步详解 传送门:异步编程系列目录…… 示例源码:触碰jQuery:AJAX异步详解.rar AJAX 全称 Asynchronous JavaScript and XML( ...

  6. jQuery调用AJAX异步详解[转]

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  7. jQuery的deferred对象详解(一)

    最近一段时间,都在研究jquery里面的$.Deffered对象,几天都搞不明白,其中源码的运行机制,网上查找了相关的资料,<jQuery的deferred对象详解>阮一峰老师的文章,里面 ...

  8. 触碰jQuery:AJAX异步详解(转)

    AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1)   使用CSS和X ...

  9. 【转】jQuery Validate验证框架详解

    jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script type=& ...

  10. jQuery form插件使用详解

    点击打开: jquery选择器全解 jquery中的style样式操作 jquery中的DOM操作 jquery中的事件操作全解 jquery中的动画操作全解 jquery中ajax的应用 自定义jq ...

随机推荐

  1. C#字符串的常用操作

    一.string关键字与StringBuilder类 C# 字符串是使用 string 关键字声明的一个字符数组.字符串是使用引号声明的,如下例所示: string s = "Hello, ...

  2. 省市区 Mysql 数据库表

    1.查省SELECT * FROM china WHERE china.Pid=02.查市SELECT * FROM chinaWHERE china.Pid=3300003.查区SELECT * F ...

  3. Oracle程序包

    程序包由两部分构成:规范(specification)和主体(body). 创建表 create table PEOPLE ( ID NUMBER primary key not null, NAME ...

  4. 支付标记化(Tokenization)技术

    道客巴巴->支付标记化(Tokenization)技术介绍 百度文库->中国银联支付标记化技术指引 NFC产业网->银联技术专家解答支付标记化Token技术 百度搜索->Tok ...

  5. C# 调用WebService的方法

    很少用C#动态的去调用Web Service,一般都是通过添加引用的方式,这样的话是自动成了代理,那么动态代理调用就是我们通过代码去调用这个WSDL,然后自己去生成客户端代理.更多的内容可以看下面的两 ...

  6. [原]捉虫记3:_ConectionPtr指针调用open失败

    背景 产品使用MySQL来存储报警服务产生的报警.在报警服务的组件中使用ADO接口 客户方有两台计算机,一台计算机A用来组态,且可以对设备进行调试,操作系统是Win7 64bit 专业版,安装了VS2 ...

  7. android从应用到驱动之—camera(1)---程序调用流程[转]

    一.开篇 写博客还得写开篇介绍,可惜,这个不是我所擅长的.就按我自己的想法写吧. 话说camera模块,从上层到底层一共包含着这么几个部分: 1.apk------java语言 2.camera的ja ...

  8. linux0.11文件分析

    在kernel包中有几个重要的文件夹和文件,他们各司其职,处理着有关内核的一些功能操作.其中文件夹有三个:blk_drv(块设备驱动),chr_drv(字符设备驱动),math(数学协处理器)  文件 ...

  9. C语言一维数组中的数据随机排列

    #include <stdio.h>#include <stdlib.h> void randomlize(int *a, int n){        int i = 0,j ...

  10. everything搜索工具小技巧

    everything工具平时用的也不多,但是有时候使用的时候却总是找不着北. everything支持五种搜索方式,如下图: 正则匹配搜索: 当你选择正则匹配之后,你可能需要匹配某个文件夹里面的某个文 ...