extjs4.2 desktop 桌面图标拖动

本文提供了一段用于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


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值