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 ...
随机推荐
- IndiaHacks 2016 - Online Edition (Div. 1 + Div. 2) B. Bear and Compressing
B. Bear and Compressing 题目链接 Problem - B - Codeforces Limak is a little polar bear. Polar bears h ...
- opencv----(1) mat最好用，和IplImage,cvmat 比较
学习了几天,发现mat比IplImage,cvmat 好用太多了. 不知道确切的原文出处,我是转自新浪的一篇博文:http://blog.sina.com.cn/s/blog_534497fd0101 ...
- spring+hibernate中的Result object returned from HibernateCallback isn't a List
Ok the problem is that for executeFind() the return type is List....so there is no way to use unique ...
- 天天记录 - Android抓包 - 抓取HTTP，TCP协议数据
需要两个工具tcpdump和Wireshark, tcpdump的使用需要root权限 一 tcpdump 1. 下载 tcpdump首页 http://www.tcpdump.or ...
- ionic系列
1. 推荐中文API https://github.com/ychow/ionic-guide
- 分治算法（Divide-and-Conquer）和Google的云计算
1.云计算:涉及到存储.计算.资源的调度和权限的管理等 2.分治算法的原理: 讲一个复杂的问题,分成若干个简单的子问题进行解决,然后对子问题的记过进行合并,得到原有问题的解 ...
- UIImageView控件
UIImageView是用于显示图像的,在iOS开发中,我们无需专门去写什么代码,不需要检查设备的类型,只需要把1x.2x.3x的图像添加到项目中,图像视图会自动的在正确的时间加载正确的图像. (1) ...
- C++中string中的erase函数怎么使用
erase函数的原型如下:(1)string& erase ( size_t pos = 0, size_t n = npos );(2)iterator erase ( iterator p ...
- C++中string类的使用方法
如果所比较的两个string 相等,则返回0: 操作string 大于参数string,返回 正数:操作string 小于参数string,返回负数. (1) 比较操作string 与 _Str 或C ...
- java web基础 --- URL重定向Filter
java web基础 --- URL重定向Filter httpRequest.getRequestDispatcher("/helloWorld").forward(httpRe ...