我目前正在制作一个网站构建器,用户可以在其中拖放来添加元素。
拖放效果很好,但我想要的是,如何禁用/隐藏目标容器中的放置占位符?
如图所示,每当我将鼠标悬停在容器上时,它都会默认显示我的拖动元素的副本,这是我不想要的。
这是我的代码:
<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>
Run Code Online (Sandbox Code Playgroud)
脚本 :
<script>
import draggable from "vuedraggable";
let idGlobal = 8;
export default {
name: "custom-clone",
display: "Custom Clone",
order: 3,
components: {
draggable, …Run Code Online (Sandbox Code Playgroud)