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 相关文章推荐
查询json的数据结构的8种方式简介
Mar 10 Javascript
jQuery解析json数据实例分析
Nov 24 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
Jul 01 Javascript
jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
Sep 05 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
Jan 21 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
Three.js的使用及绘制基础3D图形详解
Apr 27 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
Aug 10 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 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
使用 MySQL Date/Time 类型
2008/03/26 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
基于JQuery实现的Select级联
2014/01/27 Javascript
jquery 根据name名获取元素的value值
2015/02/27 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
python实现系统状态监测和故障转移实例方法
2013/11/18 Python
python无限生成不重复(字母,数字,字符)组合的方法
2018/12/04 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
关于python 跨域处理方式详解
2020/03/28 Python
Python logging模块原理解析及应用
2020/08/13 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
教师竞聘演讲稿
2014/05/16 职场文书
学术诚信承诺书
2014/05/26 职场文书
市场营销策划方案
2014/06/11 职场文书
品质标语大全
2014/06/21 职场文书
三八妇女节慰问信
2015/02/14 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
2016年情人节问候语
2015/11/11 职场文书
教师研修随笔感言
2015/11/18 职场文书
python基础之类属性和实例属性
2021/10/24 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript
python 实现图片特效处理
2022/04/03 Python
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技