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中的事件处理
Jan 16 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
jQuery实现手机上输入后隐藏键盘功能
Jan 04 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
jQuery轻量级表单模型验证插件
Oct 15 jQuery
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
jquery实现购物车基本功能
Oct 25 jQuery
6种JavaScript继承方式及优缺点(小结)
Feb 06 Javascript
JavaScript进阶(一)变量声明提升实例分析
May 09 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修改时间格式的代码
2011/05/29 PHP
php设计模式 State (状态模式)
2011/06/26 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
php模拟实现斗地主发牌
2020/04/22 PHP
两种简单实现菜单高亮显示的JS类代码
2010/06/27 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
socket.io实现在线群聊功能
2017/04/07 Javascript
React Js 微信禁止复制链接分享禁止隐藏右上角菜单功能
2017/05/26 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
判断div滑动到底部的scroll实例代码
2017/11/15 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
Vue.js分页组件实现:diVuePagination的使用详解
2018/01/10 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
vue-cli中vue本地实现跨域调试接口
2019/01/16 Javascript
vue操作dom元素的3种方法示例
2020/09/20 Javascript
python实现dict版图遍历示例
2014/02/19 Python
使用python实现tcp自动重连
2017/07/02 Python
Python实现购物评论文本情感分析操作【基于中文文本挖掘库snownlp】
2018/08/07 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
python实现交并比IOU教程
2020/04/16 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
CSS3径向渐变之大鱼吃小鱼之孤单的大鱼
2016/04/26 HTML / CSS
2014年基层党组织公开承诺书
2014/03/29 职场文书
竞选班干部演讲稿
2014/04/24 职场文书
中秋节活动总结
2014/08/29 职场文书
起诉意见书范文
2015/05/19 职场文书
2015年计算机教师工作总结
2015/07/22 职场文书
nginx容器方式反向代理实战
2022/04/18 Servers