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 相关文章推荐
jQuery UI Autocomplete 1.8.16 中文输入修正代码
Apr 16 Javascript
图片无缝滚动代码(向左/向下/向上)
Apr 10 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
JQuery球队选择实例
May 18 Javascript
JavaScript中判断两个字符串是否相等的方法
Jul 07 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
angular directive的简单使用总结
May 24 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
用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 JSON 数据解析代码
2010/05/26 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
symfony2.4的twig中date用法分析
2016/03/18 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
PHP二维索引数组的遍历实例分析【2种方式】
2019/06/24 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
jquery中添加属性和删除属性
2015/06/03 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
2015/11/02 Javascript
jquery验证手机号是否正确实例讲解
2015/11/17 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
JS求Number类型数组中最大元素方法
2018/04/08 Javascript
详解微信小程序获取当前时间及日期的方法
2019/04/28 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python常用的爬虫技巧总结
2016/03/28 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
详解在python操作数据库中游标的使用方法
2019/11/12 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
关于Python解包知识点总结
2020/05/05 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
python3.9和pycharm的安装教程并创建简单项目的步骤
2021/02/03 Python
农民入党思想汇报
2014/01/03 职场文书
在K8s上部署Redis集群的方法步骤
2021/04/27 Redis
解决golang 关于全局变量的坑
2021/05/06 Golang
虚拟机linux端mysql数据库无法远程访问的解决办法
2021/05/26 MySQL
游戏《我的世界》澄清Xbox版暂无计划加入光追
2022/04/03 其他游戏