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 相关文章推荐
IE中直接运行显示当前网页中的图片 推荐
Aug 31 Javascript
javascript 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
js使用split函数按照多个字符对字符串进行分割的方法
Mar 20 Javascript
浅谈对Angular中的生命周期钩子的理解
Jul 31 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
详解Vue CLI 3.0脚手架如何mock数据
Nov 23 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
跟混乱的页面弹窗说再见
Apr 11 Javascript
从表单校验看JavaScript策略模式的使用详解
Oct 17 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备份MYSQL数据的多种方法
2014/01/15 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
jQuery制作简单柱状图实例
2015/01/28 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
Node.js 进程平滑离场剖析小结
2019/01/24 Javascript
json解析大全 双引号、键值对不在一起的情况
2019/12/06 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
原生js生成图片验证码
2020/10/11 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[05:00]TI9战队采访 - Royal Never Give Up
2019/08/20 DOTA
Python中的with...as用法介绍
2015/05/28 Python
将Python代码打包为jar软件的简单方法
2015/08/04 Python
python基础教程之Filter使用方法
2017/01/17 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python实现冒泡排序算法的两种方法
2018/03/10 Python
python 正确保留多位小数的实例
2018/07/16 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
java字符串格式化输出实例讲解
2021/01/06 Python
精伦电子Java笔试题
2013/01/16 面试题
翻译专业应届生求职信
2013/11/23 职场文书
会计专业毕业生求职信分享
2014/01/03 职场文书
租房协议书范文
2014/08/20 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
苏州园林导游词
2015/02/03 职场文书
高中团支书竞选稿
2015/11/21 职场文书
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
Python中request的基本使用解决乱码问题
2022/04/12 Python