extjs4.2 desktop 桌面图标拖动

自带的例子桌面图标不能拖动,网上找的代码,有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.csdn.net/detail/olinbsoft/8326735


你可能感兴趣的:(JavaScript,Desktop,extjs4.2)