ExtJs拖放入门

最新推荐文章于 2023-03-18 17:31:43 发布

shangrla

最新推荐文章于 2023-03-18 17:31:43 发布

阅读量121

点赞数

文章标签： EXT JavaScript CSS XHTML HTML ViewUI

本文链接：https://blog.youkuaiyun.com/shangrla/article/details/83710543

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <link rel="stylesheet" type="text/css" href="../javascript library/css/ext-all.css"/>

	<script type="text/javascript" src="../javascript library/ext-base.js"></script>
	<script type="text/javascript" src="../javascript library/ext-all.js"></script>

    <style type='text/css'>
        body{font-size: 12px; margin: 10px;}
        
        .block {
        	border: 1px red solid;
        	height: 80px;
        	margin-top: 50px;
        	padding: 20px 0 0 20px;
        	clear: both;
        }
        
        .item {
        	border: 1px #000 solid;
        	margin-right: 10px;
        	width: 60px;
        	height: 40px;
        	text-align: center;
        	padding-top: 20px;
        	color: White;
        	float: left;
        	cursor: pointer;
        }
        
        .BorderOver{border:dashed 2px #00f; }
     </style>
</head>

<body>
    <script type="text/javascript">
        Ext.onReady(function() {
        	var proxy = new Ext.dd.DDProxy("proxy");  //建立一个可以拖动的对象
        	//(ExtJs的拖动组件分二大类，DDProxy就是要拖动的东西，而DDTarget就是拖动后可以扔进去的目标容器区)        
        	//以下建立了三个拖动源DropSource(继承自DDProxy可以查看官方文档)，并标明gruop为dd
        	var proxy_red = new Ext.dd.DragSource('proxy_red', { group: 'dd'});
        	var proxy_green = new Ext.dd.DragSource('proxy_green', { group: 'dd' });
        	var proxy_black = new Ext.dd.DragSource('proxy_black', { group: 'dd' });
        	
        	//拖动完成的事件
        	proxy_red.afterDragDrop = function(target, e, id) {
        		var destEl = Ext.get(id);
        		var srcEl = Ext.get(this.getEl());
        		
        		if (destEl.dom.id == 'target2') {
        			if(srcEl.dom.id != 'proxy_red') {
        				destEl.dom.style.border = 'solid #000 1px';
        				alert('此区域仅接受红色色块');
        				return false;
        			}
        		}
        		var sColor = srcEl.dom.id.split('_')[1];  //取得拖动源id后面的一部分，即proxy_red后面的red；
                destEl.dom.style.backgroundColor = sColor; //设置目标id的背景色
                destEl.dom.style.border = "solid #000 1px";
            };
            
            proxy_red.onDragEnter = function(e, id) {
                Ext.get(id).dom.style.border = 'dashed #00f 2px';
                Ext.get(id).dom.style.backgroundColor = '#fff';
                
                 // 添加CSS颜色   
			    if (id != this.el.dom.parentNode.id) {   
			        this.el.addClass('dropOK');   
			    }   
			    else {   
			        // 移除邀请   
			        this.onDragOut();   
			    }   

            }
                
            proxy_green.onDragOut = function(e, id) {
                Ext.get(id).dom.style.border = 'solid #000 1px';
            }
            
            proxy_green.afterDragDrop = proxy_red.afterDragDrop;  //设置为相同的事件处理函数。
            proxy_black.afterDragDrop = proxy_red.afterDragDrop;
           // proxy_green.onDragEnter = proxy_red.onDragEnter;  //设置为相同的事件处理函数。
           	proxy_black.onDragEnter = proxy_red.onDragEnter;
          //  proxy_green.onDragOut = proxy_red.onDragOut;  //设置为相同的事件处理函数。
           // proxy_black.onDragOut = proxy_red.onDragOut;   
            
            var target = new Ext.dd.DDTarget('target', 'dd');  //建立拖动目标区（这里的‘dd'与上面拖动源的’dd‘相同，
                //只有相同的group的DDProxy/DragSource才会接受）
            var target2 = new Ext.dd.DDTarget('target2', 'dd');    
        });
    </script>
    <div>
         <div id='proxy_red' class='item' style='background:red'>Red</div>
         <div id='proxy_green' class='item' style='background:green'>Green</div>
         <div id='proxy_black' class='item' style='background:black'>Black</div>
         <div id='proxy' class='item' style='color:Black'>Deplacer</div>
    </div>
    <div id="target" class="block">try to place the block into this block</div>
    <div id="target2" class="block">try to place the block into this block(only red block)</div>                   
</body>

说明：DDProxy是可拖动的对象。DragSource和DragTarget继承DDProxy。DragSource是可拖动的块，DragTarget是被拖动对象的容器。