vue3-drr-grid-layout 制定拖拽元素

vue3-drr-grid-layout 不像 vue-grid-layout 一样设置drag-allow-from属性就可以指定某个元素才能拖动单元格，但是我们可以通过is-draggable属性来实现同样的功能，我们将来样式只能点单元格中的SPAN标签才能通过单元格。

制定拖拽元素

<!-- 鼠标进入SPAN标签允许拖动，离开不允许拖拽 -->
<grid-item v-for="item in layout" :key="item.i" v-bind="gridItemProps" :is-draggable="isDraggable"
    :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :auto-size="false" class="item">
    <div>
     <span class="span" @mouseenter="onDraggable" @mouseleave="onDraggable">SPAN标签</span>
    </div>
</grid-item>
<script>
    Vue.createApp({ 
        methods: {
            onDraggable() {
                this.isDraggable = !this.isDraggable;
            }
        },
    }).mount('#app')
</script>

在线试一试

完整代码

<template>
 <div>只能点击SPAN标签才能拖动{{isDraggable}}</div>
    <div id="content" style="width: 50%;">
        <grid-layout v-model:layout="layout" :col-num="6" :row-height="30" :is-resizable="true" :margin="[10, 10]"
            style="padding: 10px;">
            <template #default="{ gridItemProps }">
                <grid-item v-for="item in layout" :key="item.i" v-bind="gridItemProps" :is-draggable="isDraggable"
                    :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i" :auto-size="false" class="item">
                    <div>
                        <span class="span" @mouseenter="onDraggable" @mouseleave="onDraggable">SPAN标签</span>
                    </div>
                </grid-item>
            </template>
        </grid-layout>
    </div>
</template>
<script setup lang="ts">
/*
 vue3-drr-grid-layout 中文文档
 https://www.itxst.com/vue3-drr-grid-layout/tutorial.html
*/
import { getCurrentInstance, onMounted, ref } from "vue";
import { GridLayout, GridItem } from "vue3-drr-grid-layout";
import "vue3-drr-grid-layout/dist/style.css";

const layout = ref([
  { x: 0, y: 0, w: 2, h: 2, i: 0 },
  { x: 2, y: 0, w: 2, h: 2, i: 1 },
  { x: 4, y: 0, w: 2, h: 2, i: 2 },
  { x: 0, y: 1, w: 6, h: 2, i: 3 },
]);
 
const isDraggable =ref(false);

const onDraggable=() =>{
     isDraggable.value = !isDraggable.value;
   }
</script>
<style scoped>
      .droppable-element {
            width: 120px;
            text-align: center;
            background: #fdd;
            border: 1px solid black;
            margin: 10px 0;
            padding: 10px;
        }

        .item {
            display: flex;
            justify-content: space-between;
        }

        .item .span {
            padding: 10px;
            border: solid 1px #ddd;
            background-color: rgb(171, 171, 171);
            color: #000;
            font-size: 11px;
        }
</style>