首页手记 ExtJs的Drag/Drop拖动功能

ExtJs的Drag/Drop拖动功能

标签：

Html/CSS JavaScript

直接给代码吧，主要重点已经在代码里注释了：

<!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="../resources/css/ext-all.css" />
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ext-all-debug.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../build/locale/ext-lang-zh_CN.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;
           
        }
    </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());
            var sColor = srcEl.dom.id.split('_')[1]; //得取拖动源id的后面一部分，即proxy_red后面的red
            destEl.dom.style.backgroundColor = sColor; //设置目标id的背景色
        };

        proxy_green.afterDragDrop = proxy_red.afterDragDrop; //为其它拖动源赋值同样的事件处理函数
        proxy_black.afterDragDrop = proxy_red.afterDragDrop;

        var target = new Ext.dd.DDTarget('target', 'dd'); //建立拖动目标区(这里的dd与上面拖动源的group:dd相同
        //只有相同group的DDProxy/DragSource才会接受)
    });
</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">我可以<br/>随便拖</div> 
</div> 
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>
</body>
</html>

简单说明几点:

1.ExtJs中的拖动功能，只要记住DDProxy是用来拖动的组件，而DDTarget就是用来放拖动块的容器就可以了，其它东西比如DragZone,DragSource都是继承自DDProxy，同样基本功能也就是拖动块

2.DDProxy其它的常用事件，可以参考官方的API文档

再来改进一下：

<!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="../resources/css/ext-all.css" />
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../ext-all-debug.js"></script>
    <script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../build/locale/ext-lang-zh_CN.js"></script>   
    <style type="text/css">   
        body{font-size:12px;margin: 10px;}     
        
        .block {
            clear:left;  
            margin-top:50px;    
            border: solid 1px #000;                     
            height:80px;            
            padding:20px 0 0 20px;
                  
        }
        .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("此区域仅接受red(红色)色块！");
                    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";
        }
        proxy_red.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与上面拖动源的group: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">我可以<br/>随便拖</div> 
</div> 
<br/>
<div id="target" class="block">把上面有颜色的色块拖到我这里试试</div>
<div id="target2" class="block">把上面有颜色的色块拖到我这里试试(此区域仅接受红色块)</div>
</body>
</html>

点击查看更多内容