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 相关文章推荐
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
js获取class的所有元素
Mar 28 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
原生JavaScript实现合并多个数组示例
Sep 21 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
jQuery实现跟随鼠标运动图层效果的方法
Feb 02 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
Vue Router中应用中间件的方法
Aug 06 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 IPV6正则表达式验证代码
2010/02/16 PHP
PHP GD 图像处理组件的常用函数总结
2010/04/28 PHP
编写PHP程序检查字符串中的中文字符个数的实例分享
2016/03/17 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
jQuery使用andSelf()来包含之前的选择集
2014/05/19 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
jquery仿苹果的时间/日期选择效果
2017/03/08 Javascript
Vue项目中跨域问题解决方案
2018/06/05 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
JS实现京东商品分类侧边栏
2020/12/11 Javascript
Python中http请求方法库汇总
2016/01/06 Python
理解生产者消费者模型及在Python编程中的运用实例
2016/06/26 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
Python随机生成均匀分布在三角形内或者任意多边形内的点
2017/12/14 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
PyQt5每天必学之组合框
2018/04/20 Python
在CMD命令行中运行python脚本的方法
2018/05/12 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
python中如何使用分步式进程计算详解
2019/03/22 Python
Django实现发送邮件找回密码功能
2019/08/12 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
酒店司机岗位职责
2013/12/14 职场文书
2014年五一促销活动方案
2014/03/09 职场文书
初三学生个人自我评定
2014/04/06 职场文书
合伙经营协议书
2014/04/18 职场文书
企业年检委托书范本
2014/10/14 职场文书
2014年政工师工作总结
2014/12/18 职场文书
描写九月优美句子(39条)
2019/09/11 职场文书
祝福语集锦:给百岁老人祝寿贺词
2019/11/19 职场文书
Vue图片裁剪组件实例代码
2021/07/02 Vue.js