专栏首页菩提树下的杨过ExtJs学习笔记(24)-Drag/Drop拖动功能

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."我可以随便拖"拖动完成后的效果

 转载请注明来自菩提树下的杨过

简单说明几点:

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>

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • redis 学习笔记(1)-编译、启动、停止

    一、下载、编译 redis是以源码方式发行的,先下载源码,然后在linux下编译 1.1 http://www.redis.io/download 先到这里下载...

    菩提树下的杨过
  • Javascript:模仿淘宝的信用评价

    老板昨天开会说:要给公司的购物平台增加信用评价功能,用户体验参考淘宝。 于是今天研究了一下,用jQuery模似一个类似的效果:  ? 代码如下: <!D...

    菩提树下的杨过
  • 常用的AJAX弹出层代码

    Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www....

    菩提树下的杨过
  • 利用 CSS3 动画绘画动态时钟

    杨逸轩
  • MF前传——探索者二号简介

        因为探索者一号供不应求,远超预期,并且我们自己设计制造的成本太高,所以没有再次生产。而是选择较高性价比的第三方STM32开发板作为MF学习板,是为探索者...

    大石头
  • linux下正向代理/反向代理/透明代理使用说明

    代理服务技术对于网站架构部署时非常重要的,一般实现代理技术的方式就是在服务器上安装代理服务软件,让其成为一个代理服务器,从而实现代理技术。 常用的代理技术分为正...

    洗尽了浮华
  • 17. Vue 常用列表操作实例 - 删除列表数据

    在这里已经有了数组list中的id号,那么根据这个id号就可以查询到该数组在数组中的索引index。

    Devops海洋的渔夫
  • 图解正向代理、反向代理、透明代理

    套用古龙武侠小说套路来说,代理服务技术是一门很古老的技术,是在互联网早期出现就使用的技术。一般实现代理技术的方式就是在服务器上安装代理服务软件,让其成为一个代理...

    菲宇
  • 图解正向代理、反向代理、透明代理

    一、正向代理(Forward Proxy)    一般情况下,如果没有特别说明,代理技术默认说的是正向代理技术。关于正向代理的概念如下: 正向代理(forwar...

    庞小明
  • 解决dnsmasq安装好之后主机不能解析其他域名的问题

    有人说ubuntu16.04是修改下面这个文件才可以修改dns服务器地址的,反正我是没有成功过,你们看着办

    bboysoul

扫码关注云+社区

领取腾讯云代金券