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 ...
随机推荐
- css Loading 教程
http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html
- CodeForces 609A USB Flash Drives
水题 #include<cstdio> #include<cmath> #include<algorithm> using namespace std; +; in ...
- 关于python 函数参数
函数参数:必选参数.默认参数.可选参数.关键字参数 1.默认参数 默认参数可以简化函数的调用.设置默认参数时,有几点要注意: 一是必选参数在前,默认参数在后,否则Python的解释器会报错: 二是如何 ...
- 关于 CentOS 7 里面 普通用户 Ulimit max user processes 值的问题
最近在对tomcat 的一个 项目进行 压测, 普通用户 启动 tomcat 的时候 压力上去以后就会报 java.lang.OutOfMemoryError 的错误, 这种错误 按道理来说都是 系统 ...
- 微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,微信小程序目前还在邀请内测阶段,目前官方放出了部分开发文档,经过笔者一天的查看和尝试,感觉文档并不全面,但是通过这些文档已经能够看出其大概面貌了.闲话不多说,我们先 ...
- find命令--xargs--exec
find命令 1.1.find命令选项-name 按照文件名查找-perm 按照文件权限来查找-prune 可以使用find命令排除当前文件夹,不查找-user 可以按照文件属主来查找-group 可 ...
- WAV音频格式分析
wav是windows下无损的声音文件,该文件保存了音频的PCM信息和播放器播放该音乐的时候的大多数信息,他有两个块组成,第一个块是格式块,第二个块是数据块 先说格式块,格式块用一张图可以解释,如下 ...
- ASIHTTPRequest异步请求
我们运行程序,如果网速很慢,查询的时候会一直黑屏,直到请求结束画面才出现,这样用户体验很不好.因此同步请求一般只是在某个子线 程中使用,而不在主线程中使用.异步请求的用户体验要比同步请求好,因此一般情 ...
- MVC分页控件的使用
1. 引用 using Webdiyer.WebControls.Mvc; 2. using Webdiyer.WebControls.Mvc; ) { )); } 3.数据来源 public cla ...
- sql2000数据库误删除后自行恢复二次覆盖成功恢复
sql2000数据库误删除后自行恢复二次覆盖成功恢复 [数据恢复故障描述] 今天接到一个客户电话,他的速达sql2000数据库,数据库误删除了,关键之前还没有备份过.他就想自己尝试恢复,使用网上下载的 ...