javascript - 实现 Vue 可拖动
问题描述
我正在尝试实现 vue 可拖动,它几乎似乎可以工作,除非我尝试在按钮上实现它。每当我尝试移动按钮时,它都会给我一条错误消息。
这是一个例子:https ://codepen.io/anon/pen/xoQRMV?editors=1111
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center>
<v-flex>
<draggable v-model="myArray" :options="options" handle=".handle">
<div v-for="element in myArray" :key="element.id" class="title
mb-3">{{element.name}}
<v-icon color="red" class="handle mt-0">drag_handle</v-icon>
</div>
<v-btn class="ml-0">Button</v-btn>
<v-icon color="red" class="handle">drag_handle</v-icon>
</draggable>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
data() {
return {
myArray: [
{name: 'Text1!!!!', id: 0},
{name: 'Text2!!!!', id: 1},
],
options: {
handle: '.handle'
}
}
}
})
任何帮助表示赞赏。
解决方案
我认为它必须从单个数组中工作,例如 https://codepen.io/anon/pen/agQVvm?editors=1111
<div id="app">
<v-app id="inspire">
<v-container>
<v-layout justify-center>
<v-flex>
<draggable :list="combinedArray" :options="options" handle=".handle">
<div v-for="element in combinedArray" :key="element.id" class="title mb-3">
<div v-if="element.type !== 'button'" class="title mb-3">
{{ element.name }}
<v-icon color="red" class="handle mt-0">drag_handle</v-icon>
</div>
<div v-else>
<v-btn>{{ element.name }}</v-btn>
<v-icon color="red" class="handle mt-0">drag_handle</v-icon>
</div>
</div>
</draggable>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
new Vue({
el: '#app',
created () {
this.combinedArray = [...this.myArray, ...this.buttonsArray]
},
data () {
return {
myArray: [
{ name: 'Text1!!!!', id: 0 },
{ name: 'Text2!!!!', id: 1 }
],
buttonsArray: [
{ name: 'Button1', id: 2, type: 'button' },
{ name: 'Button2', id: 3, type: 'button' }
],
combinedArray: [],
options: {
handle: '.handle'
}
}
}
})
推荐阅读
- python - 为什么我在运行代码时不断收到错误消息说“列表”对象没有属性条?
- html - 工作导航但切换不打开
- vhdl - DE0 Nano LED 连续亮灭
- linux - Win 10 -> VS 2019 -> .NET Core 3 WPF 应用程序 -> 发布到目录(对于 linux-x64 自包含) -> 发布失败
- reactjs - 通过 React 中的文件输入从上传的视频生成缩略图
- c++ - 两个值之间的嵌入式 C 计数器
- linux - 如何使用 cURL 查询时间戳超过 30 天的所有记录?
- mysql - SQL数据库上的复杂查询以获得选举赢家
- php - jQuery AJAX 事件 preventDefault() 不适用于表单提交
- c++ - 如何将 argv 字符串更改为长整数以获得相当大的数字