ExtJS的拖拽效果示例


Posted in Javascript onDecember 09, 2013
<html> 
<head> 
<title>hello</title> 
<meta http-equiv="content-type" content="text/html;charset=utf-8"> 
<link rel="Stylesheet" type="text/css" href="http:10.19.1.55/lib/extjs/resources/css/ext-all.css" /> 
<script type="text/javascript" src="http:10.19.1.55/lib/extjs/bootstrap.js"></script> 
<script type="text/javascript" src="http:10.19.1.55/lib/extjs/locale/ext-lang-zh_CN.js"></script> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
Ext.onReady(function(){ 
var drags=document.getElementsByTagName('li'); 
for(var i=0;i<drags.length;i++) 
{ 
Ext.dd.Registry.register(drags[i]); 
} 
new Ext.dd.DragZone('today'); 
new Ext.dd.DragZone('tmrw'); function drop(dropNodeData,source,event,dragNodeData) 
{ 
var dragged=source.dragData.ddel; 
var sourceContainer=source.el.dom; 
var desContainer=this.getEl(); 
sourceContainer.removeChild(dragged); 
desContainer.appendChild(dragged); 
return true; 
} 
var cfg={onNodeDrop:drop}; 
new Ext.dd.DropZone('today',cfg); 
new Ext.dd.DropZone('tmrw',cfg); 
}) 
</script> 
</head> 
<body> 
<h1>Today</h1> 
<ul id="today"> 
<li>shopping</li> 
<li>haircut</li> 
</ul> 
<h1>Tomorrow</h1> 
<ul id="tmrw"> 
<li>123</li> 
<li>456</li> 
</ul> 
</body> 
</html>
Javascript 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
JAVASCRIPT实现的WEB页面跳转以及页面间传值方法
May 13 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
Javascript创建类和对象详解
May 31 Javascript
JavaScript方法_动力节点Java学院整理
Jun 28 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
Vue-cli3生成的Vue项目加载Mxgraph方法示例
May 31 Javascript
Vue elementui字体图标显示问题解决方案
Aug 18 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 Javascript
用Javascript获取页面元素的具体位置
Dec 09 #Javascript
jQuery取得select选择的文本与值的示例
Dec 09 #Javascript
JavaScript—window对象使用示例
Dec 09 #Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 #Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 #Javascript
深入理解JavaScript中的传值与传引用
Dec 09 #Javascript
js Array操作的最简短最容易理解方法
Dec 09 #Javascript
You might like
桌面中心(四)数据显示
2006/10/09 PHP
浅析Mysql 数据回滚错误的解决方法
2013/08/05 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
Node.js中安全调用系统命令的方法(避免注入安全漏洞)
2014/12/05 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
3分钟读懂移动端rem使用方法(推荐)
2019/05/06 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
[44:40]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
python对配置文件.ini进行增删改查操作的方法示例
2017/07/28 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
如何使用pyinstaller打包32位的exe程序
2019/05/26 Python
python使用sessions模拟登录淘宝的方式
2019/08/16 Python
python实现代码统计器
2019/09/19 Python
Python imageio读取视频并进行编解码详解
2019/12/10 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
python用Configobj模块读取配置文件
2020/09/26 Python
python实现三壶谜题的示例详解
2020/11/02 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
优质飞蝇钓和渔具:RiverBum
2020/05/10 全球购物
UNIX文件系统常用命令
2012/05/25 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
小学校本培训方案
2014/06/06 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
个人融资协议书
2014/10/02 职场文书