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. Inter IPP的一些基本类型对应的vs中类型

    来自为知笔记(Wiz)

  2. hibernate 配置文件 和一个 id生成类BaseEntity.java 和一个hibernate工具类 HibernatUtils.java

    package com; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate ...

  3. 第三方系统打开EAFC的实现

    前言:EAFC是我们公司的一个框架,一个项目上,客户的OA系统要调用我们推送过去的代办任务,希望能打开我们的代办处理界面,我们的代办处理界面是winform的.引出给出了以下的一个方案.在此备存. - ...

  4. nginx提示：500 Internal Server Error错误的解决方法

    现在越来越多的站点开始用 Nginx ,("engine x") 是一个高性能的 HTTP 和反向代理服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 ...

  5. 动态规划之一ones

    n给一个整数n,要你找一个值为n的表达式,这个表达式只有1 + * ( ) 够成.并且1不能连续,比如11+1就不合法. n输入n,(1<=n<=10000) n输出最少需要多少个1才能构 ...

  6. ZYSocket 4.3.5 SOCKET框架组 发布[NEW]

    最新代码请到 github: https://github.com/luyikk/ZYSOCKET 更新 4.3.5更新说明: 修复各种BUG. 重写了一份 protobuf-net 有什么用呢,不需 ...

  7. Android NumberPicker和DatePicker分割线颜色设置

    NumberPicker /** * * 设置选择器的分割线颜色 * * @param numberPicker */ private void setDatePickerDividerColor(N ...

  8. Jquery学习笔记：操作form表单元素之一（文本框和下拉框）

    一.概述 在web页面开发中,经常需要获取和设置表单元素的值(如文本框中的内容),特别是在ajax应用中,更是常态.本文系统的介绍下如何操作. 同操作其它html元素一样,操作的过程差不多. 第一步, ...

  9. oracle 11g 11.2.0.1 设置HuagePage导致TRC 变大 变多

    最近发现diag/..../trac/ 目录下  sid_ora_xxxx.trc 文件大小为11M 而且类似文件数量很大.导致占用了8G硬盘空间 另外个同事说他的DG没有这个问题. 都一样的系统和一 ...

  10. 全陷阱破解：在Linux环境下的Jenkins中持续集成Androidproject

    本方案以 RHEL / Centos 64位Linux操作系统为例,由于这是眼下最常见的server环境. 一.安装Java SDK. 建议,不要使用诸如yum之类的玩意自己主动安装,由于openJD ...