alfred-skyblue / vue-draggable-plus Goto Github PK

<script setup lang="ts">
import AuthenticatedLayout from "@/Layouts/AuthenticatedLayout.vue";
import { Head, router } from "@inertiajs/vue3";
import { ref } from "vue";
import { VueDraggable } from "vue-draggable-plus";
const props = defineProps<{
    orders: App.Models.Order[];
    statuses: App.Models.Status[];
}>();
const statusOrders = ref([] as App.Models.Order[][]);
props.statuses.forEach((status) =>
    statusOrders.value.push(
        props.orders.filter((order) => order.status_id == status.id)
    )
);

defineOptions({ layout: AuthenticatedLayout });

function handleDrag(item: App.Models.Order) {
    statusOrders.value.forEach((el, index) => {
        if (el.map((e) => e.id).indexOf(item.id) >= 0) {
            item.status_id = props.statuses[index].id;
            router.patch(`/order/${item.id}`, item as Record<string, any>);
        }
    });
}
</script>

<template>
            <div
                class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg flex"
            >
                <div v-for="(status, index) in statuses">
                    {{ status.name }}
                    <VueDraggable
                        class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded overflow-auto"
                        v-model="statusOrders[index]"
                        :animation="150"
                        ghostClass="ghost"
                        group="people"
                        :key="status.id"
                        :id="'status' + index"
                        tag="div"
                    >
                        <div
                            v-for="item in statusOrders[index]"
                            :key="item.id"
                            class="cursor-move h-30 bg-gray-500/5 rounded p-3"
                            @dragend="handleDrag(item)"
                        >
                            {{ item.code }}
                        </div>
                    </VueDraggable>
                </div>
            </div>

</template>

<div class="main">
  <a-card title="可选控件" class="main-left">
    <template v-if="leftDraggableArray.length">
      <VueDraggable
        class="draggableWrap"
        v-model="leftDraggableArray"
        ghostClass="ghost"
        :group="{ name: 'people', pull: 'clone', put: false }"
        :sort="false"
        :clone="clone"
      >
        <div
          v-for="leftItem in leftDraggableArray"
          :key="leftItem.name"
          class="leftDraggableItem"
        >
          <icon-formula />
          {{ leftItem.type }}
        </div>
      </VueDraggable>
    </template>
  </a-card>

  <a-card title="任务设计器主体" class="main-center">
    <a-form class="center-form" :model="centerForm" :size="centerForm.config.size">
      <VueDraggable
        class="draggableWrap"
        v-model="centerForm.list"
        animation="150"
        group="people"
        ghostClass="centerGhost"
      >
        <template
          v-for="(centerFormItem, index) in centerForm.list"
          :key="centerFormItem.key"
        >
          <!-- 判断是否为删格布局 start-->
          <template v-if="centerFormItem.type == 'grid'">
            <a-row
              v-if="centerFormItem && centerFormItem.key"
              :gutter="
                centerFormItem.options.gutter ? centerFormItem.options.gutter : 0
              "
              :justify="centerFormItem.options.justify"
              :align="centerFormItem.options.align"
            >
              <a-col :span="8">
                <FormItem />
                gird 布局,暂时不做
              </a-col>
            </a-row>
          </template>
          <!-- 判断是否为删格布局 end-->

          <!-- 其他类型的元素，直接渲染为表单项  start-->
          <template v-else>
            <FormItem
              v-if="centerFormItem && centerFormItem.key"
              :centerFormItem="centerFormItem"
              :index="index"
              :centerForm="centerForm"
            />
            {{ centerFormItem.key }}
          </template>
          <!-- 其他类型的元素，直接渲染为表单项  end-->
        </template>
      </VueDraggable>
    </a-form>
  </a-card>

  <a-card title="属性配置" class="main-right"> 最右边 </a-card>
</div>
这个是我的代码然后clone 方法如下:

<DynamicScroller page-mode class="scroller" :items="vScrollItems"
  :min-item-size="ticketHeight" key-field="docUUID"
  v-draggable="[vScrollItems, draggableDirectiveConf]">
  <template v-slot="{ item, index, active }">
    <DynamicScrollerItem :item="item" :active="active" :data-index="index" class="ticketDrag">
      <ticket-item :key="item.docUUID"
        :ticketItemId="item.docUUID" />
    </DynamicScrollerItem>
  </template>
</DynamicScroller>

const vScrollItems = [
  {
    docUUID:'77d8f970-bace-4d34-bcc0-6c932242e0ae'
  },
  {
    docUUID: '76d8f970-bace-4d34-bcc0-6c932242e0ae'
  },
  {
    docUUID: '77d8f970-bace-4d34-bcc0-9c932242e0ae'
  }
];
const ticketDrag = {
  name: 'ticketSort',
  pull: ['ticketSort'],
  put: ['ticketSort']
};
const draggableDirectiveConf = {
  animation: 150,
  target: '.ticketDrag',
  group: ticketDrag,
  handle: ".v-card-item__prepend"
}

<VueDraggable
    v-model="formStructure[sectionIndex]"
    animation="150"
    ghostClass="ghost"
    chosenClass="ghost"
    dragClass="drag"
    handle=".handle"
    group="questions"
    @choose="sorting = true"
    @unchoose="sorting = false"
    :sort="true"
    :scrollSensitivity="75"
  >

<VueDraggable
    ...
    scrollSensitivity="75"
  >

caught (in promise) DOMException: Failed to execute 'setAttribute' on 'Element': '0' is not a valid attribute name.
    at patchAttr (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:8103:10)
    at patchProp (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:8234:5)
    at mountElement (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:5786:11)
    at processElement (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:5764:7)
    at patch (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:5698:11)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:6128:11)
    at ReactiveEffect.run (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:405:19)
    at instance.update (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:6220:52)
    at setupRenderEffect (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:6228:5)
    at mountComponent (http://localhost:5173/node_modules/.vite/deps/chunk-3NMN3MUW.js?v=08779242:6046:5)

// TestView.vue
<template>
  <div class="container">
    <VueDraggable
      class="left"
      :group="{ name: 'g1', pull: 'clone', put: false }"
      :clone="clone"
      :sort="false"
      animation="150"
      v-model="data"
    >
      <p v-for="(el, index) in data" :key="el.name + index">{{ el.name }}</p>
    </VueDraggable>
    <NestedDraggable v-model="list" class="right"></NestedDraggable>
  </div>
  <button @click="console.log(list)">log</button>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VueDraggable } from 'vue-draggable-plus';
import NestedDraggable from './NestedComponent.vue';
import { v4 as uuidv4 } from 'uuid';
import data from './data';
import type { IComponentList } from './type';

const list = ref<IComponentList[]>([]);

const clone = (element: any) => {
  console.log('clone');
  let e = {
    key: uuidv4(),
    name: element.name,
    component: element.component,
    children: element.children
  };

  if (list.value.length === 0) {
    console.log('push');
    list.value.push(e);
    return;
  }

  return e;
};
</script>

<style lang="scss">
.container {
  display: flex;
  justify-content: space-between;
  height: 80vh;

  .left {
    width: 50%;
  }

  .right {
    width: 50%;
    background: green;
  }
}
</style>

// NestedComponent.vue
<template>
  <VueDraggable class="drag-area" v-model="modelValue" group="g1">
    <div v-for="(el, index) in modelValue" :key="el.name">
      <component :is="el.component" :index="index" v-model="modelValue"></component>
    </div>
  </VueDraggable>
</template>
<script setup lang="ts">
import { VueDraggable } from 'vue-draggable-plus';
import type { IComponentList } from './type';
// import TestComponent from './TestComponent.vue';

const modelValue = defineModel<IComponentList[]>({ required: true });
</script>
<style scoped>
.drag-area {
  min-height: 50px;
  outline: 1px dashed;
}
</style>

// TestComponent.vue
<template>
  <p>{{ modelValue[index].name }}</p>
  <NestedDraggable v-model="modelValue[index].children"></NestedDraggable>
  <br />
</template>

<script setup lang="ts">
import type { IComponentList } from './type';
import NestedDraggable from './NestedComponent.vue';

defineProps<{ index: number }>();

const modelValue = defineModel<IComponentList[]>({ required: true });
</script>

// data.ts
import type { IComponentList } from './type';

import TestComponentVue from './TestComponent.vue';

const data = [
  { key: '', name: '控件1', component: TestComponentVue },
  { key: '', name: '控件2', component: TestComponentVue },
  { key: '', name: '控件3', component: TestComponentVue, children: [{ key: '', name: '控件1', component: TestComponentVue }] },
  { key: '', name: '控件4', component: TestComponentVue },
  { key: '', name: '控件5', component: TestComponentVue }
];

export default data;

// type.ts
export interface IComponentList {
  key: string;
  name: string;
  component: any;
  children: IComponentList[];
}

npm i
npx webpack ./main.js
node dist/main.js

 <VueDraggable v-model="productImages" animation="150" handle=".product-image-header-drag">
<ul>
 <li  v-for="(item, index) in productImages" :key="index"></li>
</ul>
 </VueDraggable>


<script lang="ts" setup>
const productImages = ref<[]>([]);
</script >

<ul v-draggable="[productImages, { animation: 300, onUpdate: onUpdate, handle: '.product-image-header-drag' }]">
 <li  v-for="(item, index) in productImages" :key="index"></li>
</ul>


<script lang="ts" setup>
const productImages = ref<[]>([]);
</script >

<script lang="ts" setup>
const productImages = ref<ProductModel.Image[]>([]);
const producOptions = ref<ProductModel.Options[]>([]);
const producVariants = ref<ProductModel.Variant[]>([]);

 //从服务器请求数据
  let value = await ProductService.getAsync();

  productImages.value = value.images;  //数据无法排序
  producOptions.value = value.options; //数据无法排序
  producVariants.value = value.variants; //正常 最后一个它既然正常

//该方法数据正常排序
   value.images.forEach(item => {
            productImages.value.push(item)
      })
value.options.forEach(item => {
            producOptions.value.push(item)
        })
  value.variants.forEach(item => {
            producVariants.value.push(item)
        })


</script >

/**
 * 产品信息
 */
export namespace ProductModel {

    /**基类 */
    export class Base {

        /**
         * 产品描述
         */
        body_html: string = "";

        /**
         * 创建日期
         */
        created_at?: string;


        /**产品id */
        id: string = "";

        /**
         * 对象图片
         */
        images: Image[] = [];

        /**
         * 自定义产品属性。例如，大小、颜色和材料。每个产品最多可以有 3 个选项
         */
        options: Options[] = [];


        /**产品的分类 */
        product_type: string = "";


        /**发布时间 */
        published_at?: string;

        /**发布到销售点渠道 */
        published_scope: string = "";

        /**产品的状态  active=活跃 archived=下架 draft=草稿 */
        status: string = "active";

        /** 筛选和搜索的逗号分隔标记字符串 一个产品最多可以有 250 个标签。每个标签最多可包含 255 个字符。 */
        tags: string = "";

        /**产品名称 */
        title: string = "";

        /**修改时间 */
        updated_at?: string;

        /**多属性 */
        variants: Variant[] = [];

        /**厂商名称 */
        vendor: string = "";
    }

    /**商品图片 */
    export class Image {
        /**
         * 商品图片的唯一数字标识符。
         */
        id: string = "0";
        /**
         * 产品图像在列表中的顺序。第一个产品图片位于位置 1，是商品的“主”图片。
         */
        position: number = 0;

        /**
         * 产品图像在列表中的顺序。第一个产品图片位于位置 1，是商品的“主”图片。
         */
        product_id: string = "0";
        /**
         * 与图像关联的变体 ID 数组
         */
        variant_ids: string[] = [];
        /**
         * 图片地址
         */
        src: string = "";
        /**
         * 上传时确定的图像的宽度尺寸
         */
        width?: number;
        /**
         * 上传时确定的图像的高度尺寸
         */
        height?: number;

        /**创建时间 */
        created_at?: string;

        /**修改时间 */
        updated_at?: string;

        /**是否选中 */
        _vIsSelected?: boolean;

        /**显示操作 */
        _vShowTools?: boolean

    }

    /**SKU 属性选项值 */
    export class Options {
        /**
         * id
         */
        id: string = "0";

        /**商品ID */
        product_id: string = "0";

        /**属性选项key */
        name: string = "";

        /**排序位置 */
        position: number = 1;

        /**属性选项值 */
        values: string[] = [];

        /**验证key */
        _validateName?: boolean;


        /**验证选项值  */
        _validateValues?: number[]
    }

    /**商品属性 */
    export class Variant {


        /**id */
        id: string = "0";

        /**
         * 商品的条形码、UPC 或 ISBN 编号
         */
        barcode?: string;

        /**创建日期 */
        created_at?: string = "";

        /**
         * 调整或销售前商品的原始价格
         */
        compare_at_price: string = "";

        /**储存产品多属性的履行服务的句柄 */
        fulfillment_service: string = "manual";


        /**产品变型的重量（以克为单位） */
        grams: number = 0;

        /**
         * 产品图片的唯一数字标识符。 图片必须与多属性关联到同一商品
         */
        image_id: string = "0";

        /**清单项的唯一标识符，在清单 API 中用于查询清单信息 */
        inventory_item_id: string = "0";

        /**跟踪产品多属性的库存物料数量的履行服务。 有效值  shopify  null */
        inventory_management?: string;


        /**是否允许客户在产品多属性缺货时下订单。有效值  deny=不允许  continue=允许 */
        inventory_policy: string = "deny";

        /**所有位置的广告资源汇总。若要调整特定位置的库存 */
        inventory_quantity?: string = "";

        /**
         * 选项值 option1  
         */
        option1?: string;

        /**
         * 选项值  option2 option3
         */
        option2?: string;

        /**
         * 选项值   option3
         */
        option3?: string;

        /**多属性的呈现价格列表 */
        presentment_prices?: any = {};

        /**产品多属性的价格 */
        price: string = "0";

        /**产品ID */
        product_id: string = "0";

        /** */
        sku: string = "";

        /**销售产品变型时是否收取税费 */
        taxable: boolean = false;

        /**
         * 产品变型的标题。该字段是和字段的串联。您只能使用这些字段间接更新。
         */
        title: string = "";

        /**
         * 单位值
         */
        weight: number = 0;

        /**
         * 单位选项值 g=克 kg=千克 oz=盎司 lb=磅
         */
        weight_unit: string = "g";

    }
}

[vue-draggable-plus]: Root element not found
Uncaught Sortable: `el` must be an HTMLElement, not [object Undefined]

import SomeComponent from 'SomeComponent.vue'

const SomeComponent = defineAsyncComponent(() => import(`${someComponentName}.vue`))

$ npm install
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '@achrinza/[email protected]',
npm WARN EBADENGINE   required: { node: '8 || 10 || 12 || 14 || 16 || 17' },
npm WARN EBADENGINE   current: { node: 'v18.13.0', npm: '9.2.0' }
npm WARN EBADENGINE }
npm WARN deprecated [email protected]: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated [email protected]: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
npm WARN deprecated [email protected]: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated [email protected]: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated [email protected]: 3.x is no longer supported
npm WARN deprecated [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm WARN deprecated @hapi/[email protected]: Moved to 'npm install @sideway/address'
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
npm WARN deprecated @hapi/[email protected]: Switch to 'npm install joi'
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.

added 1389 packages, and audited 1390 packages in 46s

118 packages are looking for funding
  run `npm fund` for details

30 vulnerabilities (1 low, 5 moderate, 19 high, 5 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

$ npm run serve

> [email protected] serve
> vue-cli-service serve

 INFO  Starting development server...
10% building 2/5 modules 3 active ...ef--14-0!/home/pmorch/work/ost/src/main.jsError: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/home/pmorch/work/ost/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/pmorch/work/ost/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/pmorch/work/ost/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
node:internal/crypto/hash:71
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (/home/pmorch/work/ost/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/pmorch/work/ost/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/pmorch/work/ost/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/pmorch/work/ost/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/pmorch/work/ost/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/pmorch/work/ost/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v18.13.0

	<div class="row">
		<div class="col-6">
			<VueDraggable
				class="list-group"
				v-model="list1"
				animation="150"
				ghostClass="ghost"
				group="people"
			>
				<div
					v-for="item in list1"
					:key="item.no-id"
					class="list-group-item"
				>
					{{ item.name }}
				</div>
			</VueDraggable>
		</div>
		<div class="col-6">
			<VueDraggable
				class="list-group"
				v-model="list2"
				animation="150"
				group="people"
				ghostClass="ghost"
			>
				<div
					v-for="item in list2"
					:key="item.no-id"
					class="list-group-item"
				>
					{{ item.name }}
				</div>
			</VueDraggable>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
const list1 = ref([
	{
		"name": "test",
		"no-id": "employees.id"
	},
	{
		"name": "active",
		"no-id": "employees.active"
	},
	{
		"name": "firstname",
		"no-id": "employees.firstname"
	},
	{
		"name": "lastname",
		"no-id": "employees.lastname"
	}
])
const list2 = ref([
	{
		"name": "short",
		"no-id": "employees.short"
	},
	{
		"name": "birthday",
		"no-id": "employees.birthday"
	},
	{
		"name": "number",
		"no-id": "employees.number"
	},
	{
		"name": "fullname",
		"no-id": "employees.fullname"
	}
])
</script>

    <VueDraggable
      v-model="list"
      @update="listUpdate"
    >

  methods: {
    listUpdate() {
      this.firstElementInUpdate = this.list[0]
    }
  },

  methods: {
    listUpdate() {
      nextTick(() => {
        this.firstElementInUpdate = this.list[0]
      })
    }
  },

<template>
    <div class="flex">
        <VueDraggable ref="el" v-model="list" animation="150" ghostClass="ghost"
            class="flex flex-col gap-2 p-4 w-300px h-300px m-auto bg-gray-500/5 rounded" :onMove="onMove">
            <div v-for="item in list" :key="item.id" class="cursor-move h-30 bg-gray-500/5 rounded p-3 cursor-move">
                {{ item.name }}
            </div>
        </VueDraggable>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { type UseDraggableReturn, VueDraggable } from 'vue-draggable-plus'
const list = ref([
    {
        name: 'Joao',
        id: 1
    },
    {
        name: 'Jean',
        id: 2
    },
    {
        name: 'Johanna',
        id: 3
    },
    {
        name: 'Juan',
        id: 4
    }
])

const onMove = () => {
    return false
}
</script>

<style scoped>
.ghost {
    opacity: 0.5;
    background: #c8ebfb;
}
</style>