el-draggable

根据提供的引用内容，el-draggable是一个Vue元素，它是ElementUI对话框拖动的一种用法。可以通过npm安装vue-element-dialog-draggable来使用el-draggable，并且可以设置containment属性为true来限制元素的拖动范围。使用el-draggable可以实现将页面上的某个元素拖动到input框中填充值的需求。具体实现方法如下：
1. 在需要拖动的元素上添加draggable属性，例如：<div draggable="true" @dragstart="dragstart">{{ xxx }}</div>。
2. 在拖进的元素上添加事件，监听已有元素进入，例如：<el-input v-model="sourceName" @dragover="(e) => e.preventDefault()" @drop="dragEnter"></el-input>。
3. 在js代码中进行赋值，例如：

   let currentDragText = "";
   const dragstart = (e) => {
     currentDragText = e.target.innerText;
   };
   const dragEnter = () => {
     sourceName = currentDragText;
   };

通过以上步骤，你可以使用el-draggable实现将页面上的某个元素拖动到input框中填充值的需求。

相关问题

el-table-draggable 首行行禁止拖拽

您好，针对您的问题，您可以通过设置el-table-draggable组件的handle参数来实现首行行禁止拖拽的效果。

具体做法是，在el-table-draggable组件中的列定义中，为第一列添加一个class名称，例如"first-column"，然后在el-table-draggable组件的handle参数中设置一个选择器，选择器为除了第一列之外的所有列，例如".el-table__body-wrapper .el-table__row:not(.first-column)"，即可实现首行行禁止拖拽的效果。

示例代码如下：

<el-table-draggable :data="tableData" :columns="tableColumns" :handle="'.el-table__body-wrapper .el-table__row:not(.first-column)'"></el-table-draggable>

其中，tableData和tableColumns为数据和列定义，可根据实际情况进行替换。

el-table-draggable 表格首行禁止拖拽

在 `el-table-draggable` 中禁止表格首行拖拽，可以通过设置 `:header-draggable="false"` 属性来实现。以下是示例代码：

<template>
  <div>
    <el-table-draggable :data="tableData" :columns="tableColumns" :header-draggable="false">
    </el-table-draggable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2021-01-01', name: 'John', address: 'New York' },
        { date: '2021-01-02', name: 'Jane', address: 'Paris' },
        { date: '2021-01-03', name: 'Bob', address: 'London' }
      ],
      tableColumns: [
        { prop: 'date', label: 'Date', width: 180 },
        { prop: 'name', label: 'Name', width: 180 },
        { prop: 'address', label: 'Address' }
      ]
    };
  }
};
</script>

将 `header-draggable` 属性设置为 `false`，即可禁止表格首行拖拽。