view视图层

  <!-- 使用双重嵌套结构 -->
          <el-button class="selectable-button" type="text" @click="handleAgentDetail(data.row, 1)">
            <span  ref="textSpan" class="selectable-text"   draggable="true" @dragstart="handleDragStart" @mousedown.stop @mouseup.stop
            >{{ data.row.agentName }}</span>
          </el-button>

js逻辑

    handleAgentDetail(row, type) {
    },
    handleDragStart(event) {
      const text = this.$refs.textSpan.innerText;
      event.dataTransfer.setData("text/plain", text);
      // console.log("开始拖动，复制内容：", text);
    },

css样式

.selectable-button {
  position: relative;

}
.selectable-button :active {
  pointer-events: none; /* 解决部分浏览器按下时的冲突 */
}
.selectable-text {
  user-select: text;
  cursor: grab;
  display: inline-block;
  //padding: 0 10px;

  width: 100%;
  height: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #1890ff;
}