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 ...
随机推荐
- 用apache配置多个tomcat webapp
The Apache HTTP Server Project is an effort to develop and maintain an open-source HTTP server for m ...
- LINQ to SQL语句之Union All/Union/Intersect和Top/Bottom和Paging和SqlMethods
我们继续讲解LINQ to SQL语句,这篇我们来讨论Union All/Union/Intersect操作和Top/Bottom操作和Paging操作和SqlMethods操作 . Union Al ...
- 如何在Android中添加系统服务
一,在frameworks/base/core/java/android/content/Context.java中添加 public static final String RADIO_SERVIC ...
- Android——init可执行程序
init进程是Android启动后,系统执行的第一个名称为init的可执行程序. 功能: 设备管理 解析启动脚本init.rc 执行启动脚本中的基本功能 执行启动脚本中的各种服务 代码路径:syste ...
- 不小心删掉root目录......
1.先保存还剩下的的东西,比如说桌面的文件,保存在/下面其他目录 2.执行命令 cp -R /etc/skel/.[!.]* ./ 3.reboot
- 原生js的各种方法
原生js操作dom元素 var link = document.createElement( "link" );link.type = "image/x-icon&quo ...
- curl讲解第一篇---入门和基本使用
概念 它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及 LDAP. curl同样支持HTTPS认证,HTTP POST方法, ...
- Sping--IOC概念
1. 新建项目, 引入spring包(sping, common-annotation, common-logging包), 还有junit包. user.java: package com.bjsx ...
- Reinstall the Arduino Pro Mini Bootloade ISP（转）
源:Reinstall the Arduino Pro Mini Bootloade ISP To resolve the errors I burned the bootloader to the ...
- Mac下配置node.js环境（Mac 10.12）
有安装就有卸载,卸载教程参考:http://www.cnblogs.com/EasonJim/p/6287141.html 一.官方下载pkg安装包 1.安装 到官网https://nodejs.or ...