el-input可以使用draggable吗
时间: 2023-08-07 16:04:40 浏览: 58
el-input是一个基于Element UI的输入框组件,不支持直接使用draggable属性。但是,你可以将el-input放置在一个支持draggable属性的容器元素中,然后使用JavaScript代码实现拖拽功能,最后将el-input的位置设置为容器元素的位置即可。另外,Element UI中提供了el-draggable组件,可以用于实现拖拽功能,你可以尝试将el-input放置在el-draggable组件中,来实现拖拽功能。
相关问题
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)",即可实现首行行禁止拖拽的效果。
示例代码如下:
```html
<el-table-draggable :data="tableData" :columns="tableColumns" :handle="'.el-table__body-wrapper .el-table__row:not(.first-column)'"></el-table-draggable>
```
其中,tableData和tableColumns为数据和列定义,可根据实际情况进行替换。
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框中填充值的需求。