拖动一个元素但放下其他元素的数组
Drag an element but drop an array of other elements
我正在使用 Vue.Draggable library that is based on the SortableJS 库。
在我的代码中,我有 2 个可拖动列表,但我有第三个未包含简单元素的列表。
第三个列表有一个对象数组,每个对象都有一个端点条目,当我放下我的元素时,我想执行一个函数,从端点获取对象数组并将其与目标列表合并。
var vm = new Vue({
el: "#main",
data: {
list: [{
name: "John"
}, {
name: "Joao"
}, {
name: "Jean"
}],
list2: [{
name: "Juan"
}, {
name: "Edgard"
}, {
name: "Johnson"
}],
list3: [{
name: "First",
endpoint: 'http://api.com/first'
}, {
name: "Second",
endpoint: 'http://api.com/second'
}, {
name: "Third",
endpoint: 'http://api.com/third'
}]
},
methods: {
getAllTheFirstNames (evt) {
// i want to do something like this
axios.get(evt.elementDragged.endpoint)
.then(res => {
evt.dropList.add(res.data /* res.data is an array of names */)
})
},
add: function() {
this.list.push({
name: 'Juan'
});
},
replace: function() {
this.list = [{
name: 'Edgard'
}]
}
}
});
.normal {
background-color: grey;
}
.drag {
background-color: green;
}
.dragArea {
min-height: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
<div id="main">
<h1>Vue Draggable</h1>
<div class="drag">
<h2>List 1 Draggable</h2>
<draggable v-model="list" class="dragArea" :options="{group:'people'}">
<div v-for="element in list">{{element.name}}</div>
</draggable>
<h2>List 2 Draggable</h2>
<draggable v-model="list2" class="dragArea" :options="{group:'people'}">
<div v-for="element in list2">{{element.name}}</div>
</draggable>
<h2>List 3 Draggable</h2>
<draggable v-model="list3" class="dragArea" :options="{group:'people'}" @end="getAllTheFirstNames">
<div v-for="element in list3">{{element.name}}</div>
</draggable>
</div>
</div>
这是fiddle
对于那些将要遇到类似问题的人,这里是解决方案。
首先您需要处理 @end
事件,然后在您的方法中您可以通过访问您将在 v-for
中初始化的属性来获取拖动元素的 ID,在我的情况是 data-id
所以我可以这样访问它:
let id = evt.item.dataset.id
现在您的函数中有了您的 id,您可以使用 API.
获取您的对象数组
接下来,您需要将刚刚恢复的数组添加到具有正确索引的第二个列表中,为此,您需要获取第二个列表的目标索引并将其与您的数组一起提供:
let index = evt.newIndex
this.secondList.splice(index, 0, ...myArray)
最后一步,你需要清理第二个列表,因为最初拖动的元素也会在那里,对我来说我只是做了一个循环,如果我没有在其中一个对象中找到某个属性,这意味着一定要去掉,不过真的可以随便想。
完整代码如下:
<draggable
v-model="firstList"
:clone="clone"
:options="options"
@end="onEnd">
<div
v-for="c in firstList"
:key="c.id"
:data-id="c.id">
</div>
</draggable>
...
onEnd (evt) {
const id = evt.item.dataset.id
HTTP.get(`/${id}/getMyArray`)
.then(res => {
let myObjects = JSON.parse(res.data) // => [{...}, {...}, ...]
let index = evt.newIndex
this.secondList.splice(index, 0, ...myObjects)
})
}
我正在使用 Vue.Draggable library that is based on the SortableJS 库。
在我的代码中,我有 2 个可拖动列表,但我有第三个未包含简单元素的列表。
第三个列表有一个对象数组,每个对象都有一个端点条目,当我放下我的元素时,我想执行一个函数,从端点获取对象数组并将其与目标列表合并。
var vm = new Vue({
el: "#main",
data: {
list: [{
name: "John"
}, {
name: "Joao"
}, {
name: "Jean"
}],
list2: [{
name: "Juan"
}, {
name: "Edgard"
}, {
name: "Johnson"
}],
list3: [{
name: "First",
endpoint: 'http://api.com/first'
}, {
name: "Second",
endpoint: 'http://api.com/second'
}, {
name: "Third",
endpoint: 'http://api.com/third'
}]
},
methods: {
getAllTheFirstNames (evt) {
// i want to do something like this
axios.get(evt.elementDragged.endpoint)
.then(res => {
evt.dropList.add(res.data /* res.data is an array of names */)
})
},
add: function() {
this.list.push({
name: 'Juan'
});
},
replace: function() {
this.list = [{
name: 'Edgard'
}]
}
}
});
.normal {
background-color: grey;
}
.drag {
background-color: green;
}
.dragArea {
min-height: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.17.0/vuedraggable.min.js"></script>
<div id="main">
<h1>Vue Draggable</h1>
<div class="drag">
<h2>List 1 Draggable</h2>
<draggable v-model="list" class="dragArea" :options="{group:'people'}">
<div v-for="element in list">{{element.name}}</div>
</draggable>
<h2>List 2 Draggable</h2>
<draggable v-model="list2" class="dragArea" :options="{group:'people'}">
<div v-for="element in list2">{{element.name}}</div>
</draggable>
<h2>List 3 Draggable</h2>
<draggable v-model="list3" class="dragArea" :options="{group:'people'}" @end="getAllTheFirstNames">
<div v-for="element in list3">{{element.name}}</div>
</draggable>
</div>
</div>
这是fiddle
对于那些将要遇到类似问题的人,这里是解决方案。
首先您需要处理 @end
事件,然后在您的方法中您可以通过访问您将在 v-for
中初始化的属性来获取拖动元素的 ID,在我的情况是 data-id
所以我可以这样访问它:
let id = evt.item.dataset.id
现在您的函数中有了您的 id,您可以使用 API.
获取您的对象数组接下来,您需要将刚刚恢复的数组添加到具有正确索引的第二个列表中,为此,您需要获取第二个列表的目标索引并将其与您的数组一起提供:
let index = evt.newIndex
this.secondList.splice(index, 0, ...myArray)
最后一步,你需要清理第二个列表,因为最初拖动的元素也会在那里,对我来说我只是做了一个循环,如果我没有在其中一个对象中找到某个属性,这意味着一定要去掉,不过真的可以随便想。
完整代码如下:
<draggable
v-model="firstList"
:clone="clone"
:options="options"
@end="onEnd">
<div
v-for="c in firstList"
:key="c.id"
:data-id="c.id">
</div>
</draggable>
...
onEnd (evt) {
const id = evt.item.dataset.id
HTTP.get(`/${id}/getMyArray`)
.then(res => {
let myObjects = JSON.parse(res.data) // => [{...}, {...}, ...]
let index = evt.newIndex
this.secondList.splice(index, 0, ...myObjects)
})
}