Extjs7.0拖拽面板时如何禁用文本选择且保留边缘自动滚动功能

以下方案均不会破坏ExtJS内置的拖拽边缘自动滚动逻辑：

方案1：官方原生配置（优先推荐） #

ExtJS拖拽组件内置了拖拽时阻止文本选中的配置，直接在可拖拽面板的draggable配置项中添加preventSelection: true即可：

Ext.create('Ext.panel.Panel', {
    title: '可拖拽面板',
    draggable: {
        preventSelection: true // 核心配置，拖拽时自动阻止文本选中
    },
    // 其余你的面板配置
    renderTo: Ext.getBody()
});

该配置是ExtJS官方实现，只会在拖拽激活状态下阻止文本选中，不会干扰拖拽过程中的鼠标事件传播，边缘自动滚动功能可完全正常运行。

方案2：自定义拖拽场景适配 #

如果你是自行实现的拖拽逻辑，没有使用官方draggable配置，可以在拖拽的起止事件中动态绑定/解绑文本选中阻止逻辑：

// 拖拽开始回调
onDragStart: function() {
    // 绑定selectstart事件阻止文本选中
    Ext.getDoc().on('selectstart', function(e) {
        e.preventDefault();
    }, this, { id: 'drag-prevent-select-handler' });
},
// 拖拽结束回调
onDragEnd: function() {
    // 移除绑定的阻止事件，不影响页面其他正常的文本选中功能
    Ext.getDoc().un('selectstart', null, 'drag-prevent-select-handler');
}

该方案仅针对拖拽生效，没有破坏鼠标移动事件的触发逻辑，Ext的边缘滚动坐标检测可以正常运行。

方案3：CSS补充适配 #

如果上述JS配置后仍有部分区域文本被选中，可以搭配CSS方案实现，完全不影响JS事件逻辑：

1. 拖拽开始时给body添加dragging-active类
2. 拖拽结束时移除该类
3. 加入对应的样式：

.dragging-active * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

注意事项 #

不要直接全局给mousedown、mousemove事件添加e.preventDefault()，该操作会破坏ExtJS内置的边缘滚动坐标检测逻辑，导致自动滚动失效。

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