ExtJS拖拽效果

分手后的思念是犯贱 2021-11-19 16:28 450阅读 0赞

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

转载于:https://www.cnblogs.com/riasky/p/3465147.html

发表评论取消回复

表情：

评论列表（有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5元素拖拽效果

html5元素拖拽效果的实现需要借助js，分为4个步骤，代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti

谁践踏了优雅/ 2022年08月08日 19:52/ 0 赞/ 261 阅读

相关会话框拖拽效果实现

允许转载，但请注明出处：http://blog.csdn.net/sysuzjz/article/details/41801415 遇到这需求是想模仿网页版QQ，多个会话框时

缺乏、安全感/ 2022年08月06日 01:06/ 0 赞/ 240 阅读

相关 HTML5拖拽效果

drag and drop(拖拽) 拖拽元素事件 : 事件对象为被拖拽元素 dragstart : 拖拽前触发 drag :拖拽前、拖拽结束之间

末蓝、/ 2022年07月19日 12:40/ 0 赞/ 264 阅读

相关 HTML 拖拽效果

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

曾经终败给现在/ 2022年07月19日 06:27/ 0 赞/ 259 阅读

相关 RecycleView实现拖拽效果

以下是RecyclerView结合ItemTouchHelper实现的列表和网格布局的拖拽效果。效果图如下：（gif图有点顿卡，其实运行是很流畅的） ![这里写图片描述]

梦里梦外;/ 2022年06月07日 03:59/ 0 赞/ 429 阅读

相关 RecycleView动画效果和拖拽效果

RecycleView功能强大，很简单的几个步骤就能满足我们的开发需求，首先来三个效果 ![这里写图片描述][70] > 上图是动画，相当于加载数据的时候一个简单的动画

r囧r小猫/ 2022年05月19日 06:24/ 0 赞/ 498 阅读

相关 JavaScript 拖拽效果实现

我们在访问一些网站时，会发现有些内容是可以拖拽的，比较方便，那么使用JS怎么实现呢？今天结合代码展示下拖拽效果的实现。这里需要先熟悉下几个JS事件： onmouse

淩亂°似流年/ 2022年05月17日 07:39/ 0 赞/ 304 阅读

相关 ExtJS拖拽效果

ExtJS拖拽效果 <html> <head> <title>hello</title> <meta htt

分手后的思念是犯贱/ 2021年11月19日 16:28/ 0 赞/ 451 阅读

相关鼠标拖拽效果的实现

我所说的“鼠标拖拽效果”是指，鼠标在某个图标上按下，然后拖动，图标随着鼠标移动；这个效果的实现依赖控件的三个事件：Mouse\_Down,Mouse\_Move,Mouse\_

「爱情、让人受尽委屈。」/ 2021年11月10日 13:24/ 0 赞/ 487 阅读

相关 vue - 实现图片拖拽效果

下面我来分享一下如何实现图片多拽，在文章的尾部加上实现的案例。 [github地址][github]：https://github.com/sunshime/comPa

- 日理万妓/ 2021年09月30日 10:50/ 0 赞/ 557 阅读