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 简练的几个函数
Aug 29 Javascript
javascript DIV实现跟随鼠标移动
Mar 19 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
解决Vue使用swiper动态加载数据,动态轮播数据显示白屏的问题
Sep 27 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 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
laravel orm 关联条件查询代码
2019/10/21 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
JavaScript获取页面上某个元素的代码
2011/03/13 Javascript
jquery随意添加移除html的实现代码
2011/06/21 Javascript
JavaScript高级程序设计 客户端存储学习笔记
2011/09/10 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
浅谈setTimeout 与 setInterval
2015/06/23 Javascript
再JavaScript的jQuery库中编写动画效果的指南
2015/08/13 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
原生JavaScript实现Ajax的方法
2016/04/07 Javascript
vue.js入门教程之基础语法小结
2016/09/01 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
jquery+css实现侧边导航栏效果
2017/06/12 jQuery
微信小程序实现跑马灯效果
2020/10/21 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
2020/07/31 Javascript
[01:31](回顾)杀出重围,决战TI之巅
2014/07/01 DOTA
对于Python中RawString的理解介绍
2016/07/07 Python
详解将Django部署到Centos7全攻略
2018/09/26 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
pytorch中tensor张量数据类型的转化方式
2019/12/31 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
python中id函数运行方式
2020/07/03 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
七年级地理教学反思
2014/01/26 职场文书
公司年会策划方案
2014/05/17 职场文书
平安建设工作方案
2014/06/02 职场文书
2015年实习生工作总结报告
2015/04/28 职场文书
班主任开场白
2015/06/01 职场文书