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实现关键字高亮功能
Nov 12 Javascript
jQuery搜索同辈元素方法
Feb 10 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
js显示文本框提示文字的方法
May 07 Javascript
基于jquery编写分页插件
Mar 07 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
Dec 25 Javascript
使用veloticy-ui生成文字动画效果
Feb 08 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
浅谈一种让小程序支持JSX语法的新思路
Jun 16 Javascript
Javascript组合继承方法代码实例解析
Apr 02 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 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 会话(session 时间设定)使用入门代码
2008/06/05 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
php使用Header函数,PHP_AUTH_PW和PHP_AUTH_USER做用户验证
2016/05/04 PHP
php实现的错误处理封装类实例
2017/06/20 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
推荐6款基于jQuery实现图片效果插件
2014/12/07 Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
2015/08/18 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
微信小程序(应用号)开发新闻客户端实例
2016/10/24 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
详解vue-cli 构建Vue项目遇到的坑
2017/08/30 Javascript
浅谈如何使用 webpack 优化资源
2017/10/20 Javascript
微信小程序和百度的语音识别接口详解
2019/05/06 Javascript
JS面向对象之多选框实现
2020/01/17 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
python在多玩图片上下载妹子图的实现代码
2013/08/13 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python 基于UDP协议套接字通信的实现
2021/01/22 Python
支教自我鉴定
2014/01/18 职场文书
毕业生求职信的经典写法
2014/01/31 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
自荐信的基本格式
2014/02/22 职场文书
求职信怎么写
2014/05/23 职场文书
毕业生求职信范文
2014/06/29 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书