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 Event事件学习第一章 Event介绍
Feb 07 Javascript
分享一个自己动手写的jQuery分页插件
Aug 28 Javascript
jQuery中的编程范式详解
Dec 15 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
深入剖析JavaScript编程中的对象概念
Oct 21 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
JavaScript实现多栏目切换效果
Dec 12 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
js实现随机点名系统(实例讲解)
Oct 18 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
vuex实现的简单购物车功能示例
Feb 13 Javascript
JS原生瀑布流效果实现
Apr 26 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
ecshop后台编辑器替换成ueditor编辑器
2015/03/03 PHP
PHP中的traits实现代码复用使用实例
2015/05/13 PHP
PHP7 弃用功能
2021/03/09 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
js实现类似新浪微博首页内容渐显效果的方法
2015/04/10 Javascript
js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
2016/08/02 Javascript
js前端解决跨域问题的8种方案(最新最全)
2016/11/18 Javascript
写jQuery插件时的注意点
2017/02/20 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
AngularJS中下拉框的基本用法示例
2017/10/11 Javascript
纯js代码生成可搜索选择下拉列表的实例
2018/01/11 Javascript
基于vue.js无缝滚动效果
2018/01/25 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
BootstrapValidator验证用户名已存在(ajax)
2019/11/08 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
vue 二维码长按保存和复制内容操作
2020/09/22 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
python操作CouchDB的方法
2014/10/08 Python
Djang中静态文件配置方法
2015/07/30 Python
python绘制双柱形图代码实例
2017/12/14 Python
python用户管理系统
2018/03/13 Python
python基于http下载视频或音频
2018/06/20 Python
python+unittest+requests实现接口自动化的方法
2018/11/29 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python手机号前7位归属地爬虫代码实例
2020/03/31 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
CSS3实现缺角矩形,折角矩形以及缺角边框
2019/12/20 HTML / CSS
HTML5学习笔记之History API
2015/02/26 HTML / CSS
佳能德国网上商店:Canon德国
2017/03/18 全球购物
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
大学生个人简历自荐信
2015/03/06 职场文书
贫民窟的百万富翁观后感
2015/06/09 职场文书