input框使用draggable属性失效
时间: 2023-07-26 22:36:57 浏览: 48
如果你想要在 input 标签上使用 draggable 属性,需要注意以下几点:
1. draggable 属性只在拖动元素时才会生效,而 input 元素是不可拖动的。所以,你需要将 input 包裹在一个可拖动的元素中,比如 div。
2. 在一些浏览器中,input 元素默认会阻止拖动事件。你需要通过取消默认事件来解决这个问题。
下面是一个示例,展示如何使用 draggable 属性来实现 input 元素的拖拽:
```html
<div draggable="true" ondragstart="event.dataTransfer.setData('text/plain', null)">
<input type="text" value="Drag me!" onmousedown="event.preventDefault()" />
</div>
```
在这个示例中,我们将 input 元素包裹在一个 div 中,并将 div 的 draggable 属性设置为 true,代表该元素可以拖动。在 input 元素上,我们通过 onmousedown 事件来取消默认的拖动事件。此外,我们还在 div 上设置了 ondragstart 事件,来告诉浏览器在开始拖拽时不需要传递任何数据。
相关问题
el-input可以使用draggable吗
el-input是一个基于Element UI的输入框组件,不支持直接使用draggable属性。但是,你可以将el-input放置在一个支持draggable属性的容器元素中,然后使用JavaScript代码实现拖拽功能,最后将el-input的位置设置为容器元素的位置即可。另外,Element UI中提供了el-draggable组件,可以用于实现拖拽功能,你可以尝试将el-input放置在el-draggable组件中,来实现拖拽功能。
vuedraggable中的draggable属性使用方法
在vuedraggable中,draggable属性用于指定哪些元素可以进行拖放操作。它的使用方法是将一个布尔值绑定到draggable属性上,如果该值为true,则该元素可以进行拖放操作;如果该值为false,则该元素不可被拖放。
例如,你可以在使用vuedraggable组件时,将一个布尔值绑定到draggable属性上,以控制是否允许元素进行拖放操作。例如:
```
<draggable v-model="list" :draggable="isDraggable">
<!-- 渲染列表项 -->
</draggable>
```
在上面的代码中,isDraggable是一个布尔值,它决定了列表项是否可以进行拖放操作。如果isDraggable为true,则允许拖放操作;如果isDraggable为false,则禁止拖放操作。