<template>
<div>
<transition-group tag="div" class="container">
<div
class="item"
v-for="(item,index) in items"
:key="item.key"
:style="{background:item.color,width:'80px',height:'80px'}"
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnter($event, item)"
@dragend="handleDragEnd($event, item)"
></div>
</transition-group>
</div>
</template>
<script>
export default {
name: "pzoomFormPlaceBid",
props: {
value: Object,
},
data() {
return {
items: [
{ key: 1, color: "#ffebcc" },
{ key: 2, color: "#ffb86c" },
{ key: 3, color: "#f01b2d" },
],
dragging: null,
dataList: [],
siteMap: [
{
key: "SITE_SET_KANDIAN",
name: "腾讯看点",
parent: "tx",
bid: null,
},
{
key: "SITE_SET_QQ_MUSIC_GAME",
name: "QQ、腾讯音乐及游戏",
parent: "tx",
bid: null,
},
{
key: "SITE_SET_TENCENT_NEWS",
name: "腾讯新闻",
parent: "tx",
bid: null,
},
{
key: "SITE_SET_TENCENT_VIDEO",
name: "腾讯视频",
parent: "tx",
bid: null,
},
{
key: "SITE_SET_MOBILE_UNION",
name: "优量汇",
parent: "ylh",
bid: null,
},
],
// bid_adjustment: {
// site_set_package: [
// {
// site_set: [
// "SITE_SET_QZONE"
// ],
// bid_coefficient: 1
// },
// {
// site_set: [
// "SITE_SET_QZONE",
// "SITE_SET_QZONE",
// ],
// bid_coefficient: 2
// }
// ]
// }
};
},
watch: {
"value.site_set": {
handler(val) {
if (this.$store.createWatchLock) {
return false;
}
if (val.length > 0) {
if (val.includes("SITE_SET_MOBILE_UNION")) {
}
}
},
immediate: false,
},
},
methods: {
handleDragStart(e, item) {
this.dragging = item;
},
handleDragEnd(e, item) {
this.dragging = null;
},
//首先把div变成可以放置的元素,即重写dragenter/dragover
handleDragOver(e) {
console.log("handleDragOver");
e.dataTransfer.dropEffect = "move"; // e.dataTransfer.dropEffect="move";//在dragenter中针对放置目标来设置!
},
handleDragEnter(e, item) {
e.dataTransfer.effectAllowed = "move"; //为需要移动的元素设置dragstart事件
if (item === this.dragging) {
return;
}
const newItems = [...this.items];
console.log(newItems);
const src = newItems.indexOf(this.dragging);
const dst = newItems.indexOf(item);
newItems.splice(dst, 0, ...newItems.splice(src, 1));
this.items = newItems;
},
},
};
</script>
<style lang="scss" scoped>
</style>
vue 拖拽排序
最新推荐文章于 2024-06-19 15:39:02 发布