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文件的函数代码分享
Jul 28 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
js中substring和substr的定义和用法
May 05 Javascript
jQuery实现的漂亮表单效果代码
Aug 18 Javascript
JS学习之表格的排序简单实例
May 16 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
Node.js开发第三方微信公众平台
Jun 05 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
javascript实现简单留言板案例
Feb 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
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
php发送post请求函数分享
2014/03/06 PHP
ThinkPHP3.1新特性之字段合法性检测详解
2014/06/19 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
PHP删除数组中特定元素的两种方法
2019/02/28 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
javascript 精粹笔记
2010/05/09 Javascript
JavaScript对象的property属性详解
2014/04/01 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
[00:12]2018DOTA2亚洲邀请赛 Somnus丶M出阵单挑
2018/04/06 DOTA
python根据文件大小打log日志
2014/10/09 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
Html5实现iPhone开机界面示例代码
2013/06/30 HTML / CSS
浅谈h5自定义audio(问题及解决)
2016/08/19 HTML / CSS
国际政治个人自荐信范文
2013/11/26 职场文书
个性与发展自我评价
2014/02/11 职场文书
拔河比赛口号
2014/06/10 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
OpenCV图像变换之傅里叶变换的一些应用
2021/07/26 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python
警用民用对讲机找不同
2022/02/18 无线电
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers