.加载方式

//class 加载方式

<div id="dd" class="easyui-droppable" data-options="accept:'#box,#pox'" style="background:black;width:600px;height:400px;">

</div>

//JS 加载调用

$('#box').droppable({

accept:'#box,#pox',

});

属性列表

Draggable 属性

//属性设置

$('#dd').droppable({

accept : '#box', disabled : true,

});

三.事件列表

PS:source 参数获取 DOM 元素

$('#dd').droppable({

accept : '#box', onDragOver : function (e, source) {

$(this).css('background', 'blue');

},

onDragEnter : function (e, source) {

$(this).css('background', 'orange');

},

onDragLeave : function (e, source) {

$(this).css('background', 'green');

},

onDrop : function (e, source) {

$(this).css('background', 'maroon');

},

});

//onDragEnter只触发一次,而Over会在不停地拖动中不停触发

//onDrop是放入到放置区,松开鼠标左键,丢下的操作

Droggable 方法

//返回属性对象

console.log($('#box').droggable('options'));

//禁止放置

$('#box').draggable('disable');

//启用放置
$('#box').draggable('enable');

PS:我们可以使用$.fn.droppable.defaults 重写默认值对象。

$.fn.droppable.defaults.disabled = true;

Droppable(放置)组件的更多相关文章

  1. jQuery Easy UI Droppable(放置)组件

    Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...

  2. droppable放置组件

    Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...

  3. 第一百九十四节,jQuery EasyUI,Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  4. Droppable(放置组件)

    一.class加载方式 <div id="pop" class="easyui-droppable" style="width: 400px;h ...

  5. EasyUI系列学习(四)-Droppable(放置)

    一.创建组件 1.使用标签创建一个放置区 <div id="pox" class="easyui-droppable" style="width ...

  6. Tree( 树) 组件[4]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一.方法列表 //部分方法onClick : funct ...

  7. Tree( 树) 组件[3]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 事件列表很多事件的回调函数都包含'node'参数, ...

  8. Tree( 树) 组件[2]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 异步加载如果想从数据库里获取导航内容, 那么就必须 ...

  9. Tree( 树) 组件[1]

    本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一. 加载方式//class 加载方式<ul c ...

随机推荐

  1. UITableView出现卡顿如何处理

    tableView的beginUpdate和endUpdate要比reloadData和reloadRowsAtIndexPaths好,因为beginUpdate和endUpdate会执行一个动画bl ...

  2. the introduction of scrapy1.1 tools

    scrapy xxcommand:输出xxcommand的相关信息 help:scrapy的基本命令,用于查看帮助信息 version:查看版本信息,可见-V参数查看各组件的版本信息: startpr ...

  3. nodejs 在headers添加内容发送到后端

    app.all('*', function(req, res, next){ req.headers['COOKIE'] = 'Your Cookie' next() })

  4. P1337 fibonacci数列(tyvj)

    http://www.tyvj.cn/p/1337 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 著名的斐波那契数列f[n]=1               ...

  5. c++中构造函数 、析构函数的作用域详解

    我们知道,在c++中,析构函数是在函数作用域尾部执行析构函数,从而释放对象,但是有一种情况下,析构函数作用域发生变化,请看下面的例子,定义了一个Stock类,Stock类存放在stock.h中,主调用 ...

  6. Android 之形状Drawable

    形状Drawable资源允许使用 <shape>标记指定基本形状的尺寸.背景.轮廓线,从而定义这些基本形状. 每个形状都包含一个类型(通过shape属性指定).定义该形状尺寸的属性,以及指 ...

  7. ural 1090 In the Army Now

    http://acm.timus.ru/problem.aspx?space=1&num=1090 #include <cstdio> #include <cstring&g ...

  8. HttpClient 发送 HTTP、HTTPS 请求的简单封装

    import org.apache.commons.io.IOUtils; import org.apache.http.HttpEntity; import org.apache.http.Http ...

  9. (总结)工作中常用的js自定义函数——日期时间类

    //设置时间类 var Wsdatatime = function(){ this.today = (new Date()).getTime(); //当前时间 } Wsdatatime.protot ...

  10. 【转】BT5无法找到软件安装包(提供可用的BT更新源)

    像我这种一般想起才玩玩BT5的人,跟不上讯息的变化. 偶尔想尝试某个实验,然后去安装,发现提示无法找到软件安装包. 这个时候,应该注意到,现在已经从BT5到kali了,假如想我这种人,肯定比较少留意软 ...