Droppable(放置)组件
.加载方式
//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(放置)组件的更多相关文章
- jQuery Easy UI Droppable(放置)组件
Droppable(放置)组件也是一个基本组件,使用方法较简单,语法都在样例里面凝视了: 演示样例: <!DOCTYPE html> <html> <head> & ...
- droppable放置组件
Droppable 放置组件 所谓放置,就将一个事物入一个事物内触发各种效果,这个组件不依赖于其他组件.1.加载方式 //class 调用 <div id="dd" clas ...
- 第一百九十四节,jQuery EasyUI,Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
- Droppable(放置组件)
一.class加载方式 <div id="pop" class="easyui-droppable" style="width: 400px;h ...
- EasyUI系列学习(四)-Droppable(放置)
一.创建组件 1.使用标签创建一个放置区 <div id="pox" class="easyui-droppable" style="width ...
- Tree( 树) 组件[4]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一.方法列表 //部分方法onClick : funct ...
- Tree( 树) 组件[3]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 事件列表很多事件的回调函数都包含'node'参数, ...
- Tree( 树) 组件[2]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件.一. 异步加载如果想从数据库里获取导航内容, 那么就必须 ...
- Tree( 树) 组件[1]
本节课重点了解 EasyUI 中 Tree(树)组件的使用方法, 这个组件依赖于 Draggable(拖动)和 Droppable(放置)组件. 一. 加载方式//class 加载方式<ul c ...
随机推荐
- UITableView出现卡顿如何处理
tableView的beginUpdate和endUpdate要比reloadData和reloadRowsAtIndexPaths好,因为beginUpdate和endUpdate会执行一个动画bl ...
- the introduction of scrapy1.1 tools
scrapy xxcommand:输出xxcommand的相关信息 help:scrapy的基本命令,用于查看帮助信息 version:查看版本信息,可见-V参数查看各组件的版本信息: startpr ...
- nodejs 在headers添加内容发送到后端
app.all('*', function(req, res, next){ req.headers['COOKIE'] = 'Your Cookie' next() })
- P1337 fibonacci数列(tyvj)
http://www.tyvj.cn/p/1337 时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 著名的斐波那契数列f[n]=1 ...
- c++中构造函数 、析构函数的作用域详解
我们知道,在c++中,析构函数是在函数作用域尾部执行析构函数,从而释放对象,但是有一种情况下,析构函数作用域发生变化,请看下面的例子,定义了一个Stock类,Stock类存放在stock.h中,主调用 ...
- Android 之形状Drawable
形状Drawable资源允许使用 <shape>标记指定基本形状的尺寸.背景.轮廓线,从而定义这些基本形状. 每个形状都包含一个类型(通过shape属性指定).定义该形状尺寸的属性,以及指 ...
- ural 1090 In the Army Now
http://acm.timus.ru/problem.aspx?space=1&num=1090 #include <cstdio> #include <cstring&g ...
- HttpClient 发送 HTTP、HTTPS 请求的简单封装
import org.apache.commons.io.IOUtils; import org.apache.http.HttpEntity; import org.apache.http.Http ...
- (总结)工作中常用的js自定义函数——日期时间类
//设置时间类 var Wsdatatime = function(){ this.today = (new Date()).getTime(); //当前时间 } Wsdatatime.protot ...
- 【转】BT5无法找到软件安装包(提供可用的BT更新源)
像我这种一般想起才玩玩BT5的人,跟不上讯息的变化. 偶尔想尝试某个实验,然后去安装,发现提示无法找到软件安装包. 这个时候,应该注意到,现在已经从BT5到kali了,假如想我这种人,肯定比较少留意软 ...