如何禁用 vue 可拖动占位符答案

【问题标题】：How to disable vue draggable placeholder如何禁用 vue 可拖动占位符
【发布时间】：2020-05-20 06:43:09
【问题描述】：

我目前正在做一个网站构建器，用户可以在其中拖放以添加元素。

拖放效果很好，但我想要的是，如何禁用/隐藏目标容器中的放置占位符？

如图所示，每当我将鼠标悬停在容器上时，默认情况下它会显示我拖动元素的副本，这是我不想要的。

这是我的代码：

<template>
<div style="display : flex;">
    <div id="dragArea">
        <draggable
            class="dragArea list-group"
            :list="list1"
            :group="{ name: 'item', pull: 'clone', put: false }"
            :clone="cloneItem"
            @change="log"
        >
            <div class="list-group-item" v-for="element in list1" :key="element.id">{{ element.name }}</div>
        </draggable>
    </div>

    <div id="dropArea">
        <draggable class="dragArea list-group" :list="list2" group="item" @change="log">
            <div class="list-group-item" v-for="element in list2" :key="element.id">{{ element.name }}</div>
        </draggable>
    </div>
</div>
</template>

脚本：

<script>
import draggable from "vuedraggable";
let idGlobal = 8;

export default {
    name: "custom-clone",
    display: "Custom Clone",
    order: 3,
    components: {
        draggable,
    },
    data() {
        return {
            hover : false,
            list1: [
                { name: "cloned 1", id: 1 },
                { name: "cloned 2", id: 2 },
            ],
            list2: [

            ]
        };
    },
    methods: {
        log: function(evt) {
            window.console.log(evt);
        },
        cloneItem({ name, id }) {
            return {
                id: idGlobal++,
                name: name
            };
        },
    },
};
</script>

【问题讨论】：

标签： vue.js vuejs2 drag-and-drop sortablejs vuedraggable

【解决方案1】：

在<template> 中的每个<draggable> 组件上，您可以将ghost-class 属性设置为隐藏放置占位符的CSS 类（即“幽灵”或您所称的“拖动元素” ) 使用display: none; 或visibility: hidden;。

例如：

在你的<template>:

 <draggable ghost-class="hidden-ghost">

在你的 Vue 单文件组件的 <style> 部分，或者在相应的样式表中：
```
 .hidden-ghost {
     display: none;
 }
```

Working Fiddle

ghost-class 属性在内部设置 SortableJS ghostClass 选项（请参阅所有选项 here）。从Vue.Draggable v2.19.1 开始，可以将这些 SortableJS 选项修改为 Vue.Draggable 道具。

【讨论】：