ExtJS应用开启RTL模式时面板拖放归位方向错误如何修复

异常效果演示 #

问题原因 #

ExtJS的拖拽修复逻辑默认没有适配RTL（从右到左）布局的坐标系：LTR模式下元素坐标以左边缘为基准，getXY()返回的X值直接可以作为修复目标的左偏移；但RTL模式下元素定位以右边缘为基准，直接返回getXY()的坐标会导致修复动画的目标位置计算镜像偏移，出现返回方向错误的问题。

修复方案 #

修改DragZone的getRepairXY方法，增加RTL适配逻辑：判断当前页面是否为RTL模式，如果是则对X坐标做偏移修正，减去拖拽元素自身的宽度即可。

修改后的完整代码如下：

function calEventPnlSourceDD(sender){
  sender.mX=sender.getX();
  sender.dragZone = new Ext.dd.DragZone(sender.getEl(), {
        ddGroup: 'dgCal',
        getDragData: function(e) {
            var sourceEl = e.getTarget(sender.itemSelector, 10);
            if (sourceEl) {                          
                d = sourceEl.cloneNode(true);
                d.id = Ext.id();
                const sourceElFly = Ext.fly(sourceEl);
                return {
                    ddel: d,
                    sourceEl: sourceEl,
                    // 存储元素坐标和宽度用于后续RTL修正
                    repairXY: sourceElFly.getXY(),
                    sourceWidth: sourceElFly.getWidth()
                }
            }
        },
        getRepairXY: function() {
            const [x, y] = this.dragData.repairXY;
            // 适配RTL模式，Ext.isRTL为Ext全局RTL标识
            const fixX = Ext.isRTL ? x - this.dragData.sourceWidth : x;
            return [fixX, y];
          },
        onDrag: function(e) {
        
        }
  });
}
function calEventPnlTargetDD(sender){
 sender.dropZone = new Ext.dd.DropZone(sender.el, {
        ddGroup: 'dgCal',
        isDropAllowed: false,
        getTargetFromEvent: function(e) {
            return e.getTarget(sender.rowSelector);
        },              
        getAllowed: function(e) {
            var proto = Ext.dd.DropZone.prototype;
            var tg=e.target;           
            this.isDropAllowed=true;  
            return proto.dropAllowed;
        },
        notifyOver: function(source,e,data) {           
            return this.getAllowed(e);
        },
        onNodeDrop: function(target, dd, e, data) {            
         return this.isDropAllowed;
        }
  });
}

如果你的Ext版本没有提供全局Ext.isRTL标识，可以替换为document.documentElement.dir === 'rtl'做RTL模式判断。

内容的提问来源于stack exchange，提问作者user2005049