easyUI droppable组件使用
easyUI droppable组件使用：
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="easyui/jquery.min.js"></script>
<script src="easyui/jquery.easyui.min.js"></script>
<script src="easyui/locale/easyui-lang-zh_CN.js"></script>
<script src="js/test004.js"></script>
<link rel="stylesheet" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" href="easyui/themes/icon.css">
</head> <body>
<div id="pox" class="easyui-droppable" data-options="accept:'#box',onDragEnter:function(e,s){console.log('onDrapEnter');}" style="border:1px solid red;width:300px;height:300px">this is container</div>
<div id="box" class="easyui-draggable" style="border:1px solid black;width:100px">this is children</div>
<div id="pox2" style="border:1px solid black;width:300px;height:300px">this is container2</div>
</body> </html>
$(function(argument) {
var obj = {
accept: '#box', //接收哪些对象，可以是.className之类的选择器
//disabled:true,//禁止放置，但是还是能放上去的，但是事件都不响应了；
onDragEnter: function(e) { //e类型_dragener
console.log('onDragEnter');
console.log(e);
},
onDragOver: function(e) { //e类型_dragover
// console.log('onDragOver');
// console.log(e);
console.log($(this).droppable('options')); //获取options对象；
},
onDragLeave: function(e) { //e类型_dragleave
console.log('onDragLeave');
console.log(e);
},
onDrop: function(e) { //e类型_drop
console.log('onDrop');
console.log(e);
}
};
$('#pox2').droppable(obj);
$('#pox2').droppable('disable'); // 有效果呀；
$('#pox').droppable('disable'); // 有效果呀；
});
easyUI droppable组件使用的更多相关文章
- Easyui主要组件用法
Easyui主要组件用法说明: 1. combogrid用法 说明:combogrid可提供翻页列表的数据选择并可进行数据的过滤查询(查询的传人参数为q,可在控制器中获取这个参数传过来的值,下面的示 ...
- Easyui部分组件讲解
Easyui部分组件讲解 目 录 1.... Accordion(可折叠标签)... 2 1.1 实例... 2 1.2 参数... 3 2.... DateBo ...
- 对easyui datagrid组件的一个小改进
#对easyui datagrid组件的一个小改进 ##问题 在实际项目中使用datagrid时,受版面限制,有时候表格不能太大,这时候表格里面的内容就不能完全显示,用户需要经常拖动调整列宽才能看完整 ...
- easyUI panel组件
easyUI panel组件: 属性的使用: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- easyUI progressbar组件
easyUI progressbar组件: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI linkbutton组件
easyUI linkbutton组件: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- easyUI tootip组件使用
easyUI tootip组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- easyUI resizable组件使用
easyUI resizable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- easyUI draggable组件使用
easyUI draggable组件使用: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
随机推荐
- document.createElement方法的使用
我们在使用createElemen方法t创建一个元素节点的时候,似乎在IE下面怎么写都可以,但切换到FF等其它浏览器却总是会报错. 比如我们要创建一个input元素,那么在IE下,我们可以有多种写法: ...
- mark一篇文章--用nodejs搭建一个本地反向代理环境
调试线上代码的时候,我们经常遇到的一个问题就是 本地一套环境,线上一套环境,本地没有的文件用线上的这种需求.我简单来说下使用nodejs如何做到. 先说下不用nodejs我们怎么做,工具比如fiddl ...
- NOIP模拟赛---1.生气的LJJ (anger)
LJJ刚上完了一节课!这节课是数学课!他知道了加减属于一级运算,乘除属于二级运算,幂则属于三级运算,而幂的优先级>乘除的优先级>加减的优先级(这是几年级的数学课).但是,从上一套试卷+上一 ...
- Java虚拟机中的内存分配
java虚拟机在执行Java程序的过程中会把它所管理的内存划分为若干个不同的数据区域.这些区域都有各自的用途以及创建和销毁的时间. 栈:存放的是局部变量,包括:1.用来保存基本数据类型的值:2.保存类 ...
- Delphi 悬浮窗口、浮动窗口的实现
源:Delphi 悬浮窗口.浮动窗口的实现 浮动窗体的实现 http://blog.tianya.cn/blogger/post_show.asp?BlogID=68097&PostID=80 ...
- [Unity Socket]在Unity中如何实现异步Socket通信技术
在刚刚开发Unity项目的过程中,需要用到即时通信功能来完成服务器与客户端自定义的数据结构封装. 现在将部分主要功能的实现代码抽取出来实现了可以异步Socket请求的技术Demo. 客户端脚本Clie ...
- Nutch是个不错的选择
对搜索引擎的理解:我们并没有google 的源代码,因此学习搜索引擎Nutch是个不错的选择.了解一个大型分布式的搜索引擎如何工作是一件让人很受益的事情.在写 Nutch的过程中,从学院派和工业派借鉴 ...
- oracle查看表空间物理文件的名称，路径及大小
select tablespace_name, file_id,file_name,round(bytes/(1024*1024),0) total_space from dba_data_files ...
- spring调用mongodb
1.环境 Jdk:1.6.0_10-rc2 Spring3.1.2 下载 依赖jar文件: 2.相关配置 ①.spring配置文件 <?xml version="1.0" ...
- 25个Linux性能监控工具
一段时间以来,我们在网上向读者介绍了如何为Linux以及类Linux操作系统配置多种不同的性能监控工具.在这篇文章中我们将罗列一系列使用最频繁的性能监控工具,并对介绍到的每一个工具提供了相应的简介链接 ...