ExtJs学习笔记(24)Drag/Drop拖动功能

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

Code
<!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" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="../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.拖动Green块(但还未到达目标区)时的效果:

2.拖动Green块(到达目标区)时的效果

3.拖动完成后的效果

4."我可以随便拖"的拖动效果

5."我可以随便拖"拖动完成后的效果

转载请注明来自菩提树下的杨过http://www.cnblogs.com/yjmyzz/archive/2008/09/17/1292728.html

简单说明几点:

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

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

再来改进一下：

Code
<!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" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    <script type="text/javascript" src="../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>

这一次我们建立了二个目标容器

并且第二个容器仅接受红色的色块

作者：菩提树下的杨过
出处：http://yjmyzz.cnblogs.com
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

查看全文

相关阅读:
IIS7中的几种身份鉴别方式(一)Basic身份验证
 IIS7中的几种身份鉴别方式(二)集成身份验证
 java集合
 SharePoint 2010中welcome page的设置细节
 SharePoint中使用Linq出现未将对象引用到实例化的解决方法
 SharePoint 2010中关于An error was encountered while retrieving the user profile的处理方式记录
 The Need for an Architectural Body of Knowledge
The Softer Side of the Architect
Event Receivers 学习小结
 使用SmtpClient发送带图片的邮件的代码实现

原文地址：https://www.cnblogs.com/yjmyzz/p/1292728.html