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 相关文章推荐
JavaScript DOM节点添加示例
Jul 16 Javascript
12306验证码破解思路分享
Mar 25 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
JS与jQ读取xml文件的方法
Dec 08 Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
js根据需要计算数组中重复出现某个元素的个数
Jan 18 Javascript
vue项目移动端实现ip输入框问题
Mar 19 Javascript
原生JS实现随机点名项目的实例代码
Apr 30 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
微信小程序实现签字功能
Dec 23 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
PHP7修改的函数
2021/03/09 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
jQuery中:focus选择器用法实例
2014/12/30 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
node.js中cluster的使用教程
2017/06/09 Javascript
vue组件中使用iframe元素的示例代码
2017/12/13 Javascript
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
Python编写Windows Service服务程序
2018/01/04 Python
python字符串的方法与操作大全
2018/01/30 Python
python将回车作为输入内容的实例
2018/06/23 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
Python利用WMI实现ping命令的例子
2019/08/14 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python bisect模块原理及常见实例
2020/06/17 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
C语言中一个结构不能包含指向自己的指针吗
2012/05/25 面试题
综合测评自我鉴定
2013/10/08 职场文书
中学生在校期间的自我评价分享
2013/11/13 职场文书
数据管理员的自我评价分享
2013/11/15 职场文书
物流专业毕业生推荐信范文
2013/11/18 职场文书
创伤外科专业推荐信范文
2013/11/19 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
股份转让协议书
2014/04/12 职场文书
银行主办会计岗位职责
2014/08/13 职场文书
我爱家乡演讲稿
2014/09/12 职场文书
技术员岗位职责
2015/02/04 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
认识实习感想
2015/08/10 职场文书
python可视化之颜色映射详解
2021/09/15 Python