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 相关文章推荐
PNGHandler-借助JS让PNG图在IE下实现透明(包括背景图)
Aug 31 Javascript
jquery $.ajax入门应用一
Nov 19 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
Jan 21 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
JS小游戏之极速快跑源码详解
Sep 25 Javascript
jQuery实现首页顶部可伸缩广告特效代码
Apr 15 Javascript
不同js异步函数同步的实现方法
May 28 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
基于vue-cli3+typescript的tsx开发模板搭建过程分享
Feb 28 Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 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
人工智能开始玩《星际争霸2》 你的操作跟得上吗?
2017/08/11 星际争霸
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php防攻击代码升级版
2010/12/29 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP实现的微信公众号扫码模拟登录功能示例
2019/05/30 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
2011/08/28 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
JavaScript获取路径设计源码
2014/05/22 Javascript
生成二维码方法汇总
2014/12/26 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
Nodejs如何复制文件
2016/03/09 NodeJs
详解Angular 4.x Injector
2017/05/04 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
2018/02/28 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
js实现多张图片每隔一秒切换一张图片
2019/07/29 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
2020/06/05 Javascript
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
Python 字符串与二进制串的相互转换示例
2018/07/23 Python
django实现类似触发器的功能
2019/11/15 Python
解决Python使用列表副本的问题
2019/12/19 Python
浅析python标准库中的glob
2020/03/13 Python
HTML5实践-图片设置成灰度图
2012/11/12 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
纽约州一群才华横溢的金匠制作而成:Hearth Jewelry
2019/03/22 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
override和overload的区别
2016/03/09 面试题
门诊挂号室室长岗位职责
2013/11/27 职场文书
初中学生评语大全
2014/04/24 职场文书
学习与创新自我评价
2015/03/09 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
微软PC Health Check电脑健康状况检查应用下载(Win11配置检测工具)
2021/06/26 数码科技