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-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JS与C#编码解码
Dec 03 Javascript
a标签click和href执行顺序探讨
Jun 23 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
canvas实现动态小球重叠效果
Feb 06 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
Sep 28 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
Jan 02 jQuery
微信小程序实现动态显示和隐藏某个控件功能示例
Dec 14 Javascript
关于layui导航栏不展示下拉列表的解决方法
Sep 25 Javascript
vue-cli中实现响应式布局的方法
Mar 02 Vue.js
用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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
ThinkPHP 404页面的设置方法
2015/01/14 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP中for循环与foreach的区别
2017/03/06 PHP
accesskey 提交
2006/06/26 Javascript
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
优化javascript的执行速度
2010/01/23 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
javascript中用星号表示预录入内容的实现代码
2011/01/08 Javascript
JS文本框追加多个下拉框的值的简单实例
2013/07/12 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
2017/08/03 Javascript
NodeJS父进程与子进程资源共享原理与实现方法
2018/03/16 NodeJs
详解JSON Web Token 入门教程
2018/07/30 Javascript
使用vue-router为每个路由配置各自的title
2018/07/30 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
python中list循环语句用法实例
2014/11/10 Python
python在windows和linux下获得本机本地ip地址方法小结
2015/03/20 Python
python实现比较类的两个instance(对象)是否相等的方法分析
2019/06/26 Python
python垃圾回收机制(GC)原理解析
2019/12/30 Python
python Tensor和Array对比分析
2020/01/08 Python
Python分析微信好友性别比例和省份城市分布比例的方法示例【基于itchat模块】
2020/05/29 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Python 中如何使用 virtualenv 管理虚拟环境
2021/01/21 Python
Tessabit日本:集世界奢侈品和设计师品牌的意大利精品买手店
2020/01/07 全球购物
SQL SERVER面试资料
2013/03/30 面试题
银行纠风工作实施方案
2014/06/08 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
2014年设备管理工作总结
2014/11/26 职场文书
2015年化验室工作总结
2015/04/23 职场文书
《风娃娃》教学反思
2016/02/18 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs