如何让jsTree插件支持鼠标拖动选中文本且不影响原有功能

以下几种方案都不会影响jsTree原有功能，可实现常规鼠标拖动选中文本：

方案1：CSS直接开启文本选中权限 #

jsTree默认限制了节点链接的文本选中，通过CSS强制开启即可：

.jstree-anchor {
  user-select: text !important;
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
}

这个方法最简单，仅修改样式，完全保留节点的点击、展开折叠等所有原有交互。

方案2：JS监听事件区分点击与选中行为 #

如果CSS方案在个别浏览器有兼容性问题，可通过JS监听鼠标动作，只在拖动选中文本时临时阻止链接的默认跳转：

document.querySelectorAll('.jstree-anchor').forEach(anchor => {
  anchor.addEventListener('mousedown', function(e) {
    let isSelecting = false;
    const detectMove = () => {
      isSelecting = true;
      document.removeEventListener('mousemove', detectMove);
    };
    document.addEventListener('mousemove', detectMove);
    
    setTimeout(() => document.removeEventListener('mousemove', detectMove), 100);
    
    anchor.addEventListener('mouseup', function() {
      if (isSelecting) e.preventDefault();
    }, { once: true });
  });
});

该方案会自动判断用户操作意图：单纯点击节点时正常触发原有功能，拖动选中文本时仅阻止跳转，不影响其他交互。

方案3：自定义节点模板分离链接与文本 #

通过修改jsTree的节点渲染模板，把交互链接和文本内容分开，让文本成为普通可选中元素：

$('#jstree').jstree({
  core: {
    data: [], // 替换为你的节点数据
    themes: { stripes: true }
  },
  plugins: ['types'],
  types: {
    default: {
      icon: 'glyphicon glyphicon-folder-open',
      template: function(node) {
        return `
          <a class="jstree-anchor" href="${node.a_attr.href || '#'}">
            <i class="jstree-icon jstree-themeicon"></i>
          </a>
          <span class="jstree-text">${node.text}</span>
        `;
      }
    }
  }
});

再添加CSS保证布局对齐：

.jstree-node {
  display: flex;
  align-items: center;
}
.jstree-text {
  user-select: text;
  margin-left: 4px;
}

这种方式彻底拆分了交互区域和文本区域，文本天然支持拖动选中，同时节点的点击、展开等功能完全不受影响。

内容的提问来源于stack exchange，提问作者Shwetha C N T