Ext JS中的拖动技术

最新推荐文章于 2022-09-26 13:52:33 发布

stefshawn

最新推荐文章于 2022-09-26 13:52:33 发布

阅读量1.1k

点赞数

分类专栏： ExtJs

ExtJs 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Ext JS中的拖动技术

拖动技术一般在Web程序中并不常用，这种技术往往被认为是非常复杂的。然而使用Ext JS技术后，一切就变得简单起来。在Ext JS中提供了两个类：Ext.dd.DD和Ext.dd.DDProxy。这两个类都可以实现拖动的效果。只是使用DD类拖动组件时，组件也会随着鼠标的移动而移动。而使用DDProxy类拖动组件时，在拖动的过程中会有一个灰色框（与被拖动组件同样大小）随着鼠标一起移动，当松开鼠标时，灰色框消失，而被拖动的组件就会移动到新的位置。

DDProxy是DD的子类。在DD类中有两个常用的方法：lock和unlock。通过这两个方法可以锁定和解锁组件。如果组件被锁定，则无法移动该组件，除非使用unlock方法对该组件进行解锁。使用这两个类拖动组件非常容易，只需要将相应组件的id值传入这两个类的构造方法即可。如果还想调用lock、unlock以及其他的方法，就将DD或DDProxy类的对象保存在变量中。下面的代码演示了使用DD及DDProxy拖动桌面组件的方法：

 
 <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>简单的拖放操作</title> 
    <link rel="stylesheet" type="text/css" href="script/resources/css/ext-all. css" /> 
    <script type="text/javascript" src="script/adapter/ext/ext-base.js"></script> 
    <script type="text/javascript" src="script/ext-all.js"></script> 
    <script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script> 
    <script type="text/javascript"> 
    var dd1;  
    var dd2;  
    function init()   
    {  
        //  创建DDProxy和DD对象，使block1和block2可拖动  
        dd1 = new Ext.dd.DDProxy("block1");  
        dd2 = new Ext.dd.DD("block2");    
    }    
    Ext.onReady(init);   
    //  复选框要调用的单击事件方法  
    function onClick()  
    {  
        if(chkLockComponent.checked)  
        {  
                dd1.lock();  
                dd2.lock();  
        }  
            else  
            {  
                dd1.unlock();  
            dd2.unlock();  
            }  
    }  
    </script> 
    </head> 
    <body> 
    <input id="chkLockComponent" type="checkbox" onclick="onClick()" />锁定桌面组件  
    <!--  下面使用div元素定义了两个可拖动的组件，也可以使用其他的HTML元素  --> 
    <div id="block1" 
    style="position: absolute; left: 100px; top: 30px; width: 50px;
height: 50px; background-color: blue; color: yellow;">拖我</div> 
<div id="block2" 
    style="position: absolute; left: 200px; top: 70px; width: 80px; 
height: 50px; background-color: red; color: white;">Drag me</div> 
    </body> 
</html>

单击dragdrop.html文件或在浏览器中输入如下的URL可运行本节的例子：

 
 http://localhost:8080/kxdesktop/dragdrop.html

拖动的效果如图5.4所示。

图5.4 拖动的显示效果

从图5.4可以看出，block1在拖动的过程中出现一个灰色的框，当松开鼠标时，block1就会移动到灰框所在的位置。

stefshawn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext JS中的拖动技术

Ext JS中的拖动技术拖动技术一般在Web程序中并不常用，这种技术往往被认为是非常复杂的。然而使用Ext JS技术后，一切就变得简单起来。在Ext JS中提供了两个类：Ext.dd.DD和Ext.dd.DDProxy。这两个类都可以实现拖动的效果。只是使用DD类拖动组件时，组件也会随着鼠标的移动而移动。而使用DDProxy类拖动组件时，在拖动的过程中会有一个灰色框（与被拖动组件同样大小）
复制链接

扫一扫

专栏目录