ExtJS拖拽效果

<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>

ExtJS拖拽效果的更多相关文章

  1. jQuery的DOM操作实例（2）——拖拽效果&&拓展插件

    一.原生JavaScript编写拖拽效果 二.jQuery编写的拖拽效果 三.在jQuery中拓展一个拖拽插件

  2. React.js实现原生js拖拽效果及思考

    一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...

  3. js拖拽效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. WinForm支持拖拽效果

    有一个MSDN客户提问在WinForm中如何实现拖拽效果——比如在WinForm中有一个Button,我要实现的效果是拖拽这个Button到目标位置后生成一个该控件的副本. 其实这个操作主要分成三步走 ...

  5. js div浮动层拖拽效果代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)

    转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm   这篇文章主要介绍了JS实现漂亮的窗口 ...

  7. JQ实现3D拖拽效果

    <!DOCTYPE HTML> <html onselectstart='return false'> <head> <meta http-equiv=&qu ...

  8. 用JS实现版面拖拽效果

    类似于这样的一个版面,点击标题栏,实现拖拽效果. 添加onmousedown事件 通过获取鼠标的坐标(clientX,clientY)来改变面板的位置 注意:面板使用绝对定位方式,是以左上角为参考点, ...

  9. Swift2.0下UICollectionViews拖拽效果的实现

    文/过客又见过客(简书作者)原文链接:http://www.jianshu.com/p/569c65b12c8b著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 原文UICollecti ...

随机推荐

  1. yii_wiki_145_yii-cjuidialog-for-create-new-model （通过CJuiDialog来创建新的Model）

    /**** CJuiDialog for create new model http://www.yiiframework.com/wiki/145/cjuidialog-for-create-new ...

  2. 汉高澳大利亚sinox为什么不能下载源代码，因为sinox执行unix/linux/windows规划

    中国用户下载真正的澳大利亚sinox说完后sinox没有下载源代码. 这意味着,类似linux如下载linux 开源安装. 要知道.sinox并非linux. 首先,sinox是商业操作系统,就像 w ...

  3. quartz群调查调度机制和源代码分析

    pageId=85056282#quartz集群调度机制调研及源代码分析-quartz2.2.1集群调度机制调研及源代码分析" style="color:rgb(59,115,17 ...

  4. 谁能告诉我war包的作用及使用方法。。。。。。

    链接地址:http://zhidao.baidu.com/link?url=iliyTcmsTKb1K4gHMtWUsRIBaXglyOKIQsWwdrgvydvnaUHLe0KEoHvLVz8tLY ...

  5. BZOJ 1085: [SCOI2005]骑士精神( IDDFS + A* )

    一开始写了个 BFS 然后就 T 了... 这道题是迭代加深搜索 + A* -------------------------------------------------------------- ...

  6. javascript笔记整理（事件）

    一.事件驱动 1.事件javascript侦测到的用户的操作或是页面的一些行为(怎么发生的) 2.事件源引发事件的元素(发生在谁的身上) 3.事件处理程序对事件处理的程序或是函数 (发生了什么事) 二 ...

  7. C++如何屏蔽双击运行程序功能？

    问题描述: 我们开发过程中可能会经常遇到,需要屏蔽EXE的双击运行功能,只能通过宿主程序(Service或EXE)来启动.比如腾讯的迷你弹窗,就只能通过主程序来启动,而不能直接通过双击来运行. 实现原 ...

  8. MFC对话框Style说明

    Popup:弹出窗口 Overlapped:重叠窗口 Child:子窗口 在它们之间并没有太多内在的差异,但是使用不同的窗口风格,它们的外观是 不同的. 重叠窗口通常用于建立应用程序主窗口.事实上,有 ...

  9. vtk基础编程(2)-读取数据文件中的坐标点

    原文地址: http://blog.csdn.net/chinamming/article/details/16860051 1. 案例说明 在实际计算中,常常需要大量的数据, 这个时候数据文件就必不 ...

  10. 前端面试题整理（html）

    1.<!DOCTYPE>标签的定义与用法. <!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前. <!DOCTYPE> ...