小编Dar*_*ren的帖子

如何禁用vue可拖动占位符

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

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

在此输入图像描述

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

这是我的代码:

<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)

drag-and-drop vue.js sortablejs vuejs2 vuedraggable

0
推荐指数
1
解决办法
5340
查看次数

标签 统计

drag-and-drop ×1

sortablejs ×1

vue.js ×1

vuedraggable ×1

vuejs2 ×1