extjs4.2 desktop 桌面图标拖动

最新推荐文章于 2015-12-19 09:19:00 发布

原创最新推荐文章于 2015-12-19 09:19:00 发布 · 2.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs4.2 #desktop #javascript

extjs 专栏收录该内容

19 篇文章

订阅专栏

本文提供了一段用于ExtJS框架中实现桌面图标完美拖动的代码，解决了原有代码中存在的bug，如拖动过程中图标不可见的问题，并针对拖动后出现白屏的情况给出了调试解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自带的例子桌面图标不能拖动,网上找的代码,有bug,和桌面图标换行一起使用时，拖动过程图标看不见，反复调试修改，以下代码完美拖动桌面图标，有人反映拖动后会出现白屏，经调试已解决，在本论坛我的另一篇文章有解决办法。

1. 打开extjs自带的desktop.js文件加入如下代码：

        //  onRenderShortcut 桌面拖动 

    onRenderShortcut: function (v) {
        var me = this;
        me.shortcutsView.dragZone = new Ext.dd.DragZone(v.getEl(), {
            getDragData: function (e) {
                var sourceEl = e.getTarget(v.itemSelector, 10);
                if (sourceEl) {
                    var d = sourceEl.cloneNode(true);
                    d.style.left = 0;
                    d.style.top = 0;
                    d.id = Ext.id();
                    return v.dragData = {
                        sourceEl: sourceEl,
                        ddel: d,
                        sourceStore: v.store,
                        draggedRecord: v.getRecord(sourceEl)
                    }
                }
            },
            getRepairXY: function () {
                return this.dragData.repairXY;
            },
            onMouseUp: function (e) {
                var currDom = Ext.fly(this.dragData.sourceEl);
                var oldXY = currDom.getXY();
                var newXY = e.getXY();
                var width = currDom.getWidth();
                var height = currDom.getHeight();
                if (Math.abs(oldXY[0] - newXY[0]) > width || Math.abs(oldXY[1] - newXY[1]) > height) {
                    var mymaxx = me.getHeight() - me.taskbar.getHeight() - height - 10;
                    var mymaxy = me.getWidth() - width;
                        if (newXY[1] > mymaxx) { newXY[1] = mymaxx; }
                        if (newXY[1] < 1) { newXY[1] = 0; }
                        if (newXY[0] < 1) { newXY[0] = 0; }
                        if (newXY[0] > mymaxy) { newXY[0] = mymaxy; }
                    currDom.setXY(newXY);
                }

            }
        });
    },
    
   //  onRenderShortcut 桌面拖动结束

2. 在 desktop.js中找到 initComponent: function () { 里，加入代码：

me.shortcutsView.on('render', me.onRenderShortcut, me);

=======================================

源码下载: http://download.youkuaiyun.com/detail/olinbsoft/8326735