拖拽bug

src/components/drag/resizable.vue

@@ -1,9 +1,9 @@
 <template>
-    <Vue3DraggableResizable :x="left" :y="top" :w="w" :h="h" :active="active" :draggable="true" :resizable="true"
-        @activated="print('activated')" @deactivated="print('deactivated')" @drag-start="print('drag-start')"
-        @resize-start="print('resize-start')" @dragging="print('dragging')" @resizing="print('resizing')"
-        @drag-end="print('drag-end')" @resize-end="print('resize-end')">
-        <component class="draggable" :is="getWidget(dargData.type)" :config="dargData"></component>
+    <Vue3DraggableResizable :initW="initW" :initH="initH" v-model:x="top" v-model:y="left" v-model:w="w" v-model:h="h"
+        :active="active" :handles="sticks" :draggable="true" :resizable="true" :prevent-deactivation="true"
+        @drag-start="print('drag-start')" @resize-start="print('resize-start')" @dragging="print('dragging')"
+        @resizing="print('resizing')" @drag-end="print('drag-end')" @resize-end="print('resize-end')">
+        <component :is="getWidget(currentItem.type)" :config="currentItem"></component>
     </Vue3DraggableResizable>
 </template>
 
@@ -13,14 +13,17 @@ import Vue3DraggableResizable from 'vue3-draggable-resizable'
 //default styles
 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
 import { ref } from "vue";
+const initW = ref(0)
+const initH = ref(0)
 const w = ref(0)
 const h = ref(0)
 const top = ref(0)
 const left = ref(0)
-const minh = ref(50)
+// const minh = ref(50)
 const isResizable = ref(false)
 const sticks = ref([])
 const active = ref(true)
+const currentItem: any = ref({})
 
 const porps = defineProps({
     dargData: {
@@ -28,21 +31,35 @@ const porps = defineProps({
         required: true
     },
 })
-w.value = porps.dargData.css.width
-h.value = porps.dargData.css.height
-minh.value = porps.dargData.css.height
-top.value = porps.dargData.css.top
-left.value = porps.dargData.css.left
-isResizable.value = porps.dargData.config.isResizable
-sticks.value = porps.dargData.config.sticks
-console.log(w.value, h.value, '------');
+const arrData = JSON.parse(JSON.stringify(porps.dargData))
+currentItem.value = arrData
+initW.value = arrData.css.width
+initH.value = arrData.css.height
+w.value = arrData.css.width
+h.value = arrData.css.height
+top.value = arrData.css.top
+left.value = arrData.css.left
+console.log(initW.value, initH.value, w.value, h.value, top.value, left.value, '-------');
+
+isResizable.value = arrData.config.isResizable
+sticks.value = arrData.config.sticks
+// active.value = arrData.active
 
 function print(val) {
-    console.log(val)
+    currentItem.value.css.width = w.value
+    currentItem.value.css.height = h.value
+    currentItem.value.css.top = top.value
+    currentItem.value.css.left = left.value
+    console.log(val, 2555)
 }
-
 const getWidget = (name: string) => {
     //写的时候，组件的起名一定要与dragList中的element名字一模一样，不然会映射不上
     return getName[name]
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+:deep(.vdr-container.active) {
+    overflow: hidden;
+}
+</style>

src/module/config/button.ts

@@ -4,7 +4,8 @@ const btnConfig = {
     name: '文本',
     size: 30,
     color: "#158cfb",
-    isResizable: false, //禁止缩放
+    isResizable: true, //禁止缩放
+    // sticks:['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'],
     aspectRatio: false, //禁止等比例缩放
 }
 

src/module/index.ts

@@ -3,21 +3,21 @@ import { btnConfig, btnCss } from "./config/button";
 import { configList1, cssList1 } from "./config/input";
 
 const attributeValue = [{
-    id: 1, type: 'SceneButton', name: "场景",
-    config: btnConfig,
-    css: btnCss,
+    id: 3, type: 'Input', name: "输入框3", active: false,
+    config: configList1,
+    css: cssList1,
 }, {
-    id: 1, type: 'SceneButton', name: "场景",
+    id: 2, type: 'SceneButton', name: "场景", active: false,
     config: btnConfig,
     css: btnCss,
 }]
 
 const layout = [{
-    id: 1, type: 'Input', name: "输入框3",
+    id: 3, type: 'Input', name: "输入框3", active: false,
     config: configList1,
     css: cssList1,
 }, {
-    id: 1, type: 'SceneButton', name: "场景",
+    id: 4, type: 'SceneButton', name: "场景", active: false,
     config: btnConfig,
     css: btnCss,
 }]

src/router/index.ts

@@ -7,7 +7,13 @@ const routes: Array<RouteRecordRaw> = [
     path: '/',
     name: 'home',
     component: () => import('../views/HomeView.vue'),
-  }
+  },
+  {
+    //路由初始指向
+    path: '/TestDrag',
+    name: 'TestDrag',
+    component: () => import('../views/TestDrag.vue'),
+  },
 ]
 
 const router = createRouter({

src/views/HomeView.vue

@@ -68,14 +68,20 @@
       <!-- 中间 -->
       <div class="panel_center">
         <div class="card_home">
-          <draggable class="Bzu" :list="extraImgs1" itemKey="id" filter=".unmover"
-            :group="{ name: 'itxst', pull: false, put: true }">
-            <template #item="{ element }">
-              <div class="item_module_center move">
-                <VueDrag class="draggable" :dargData="element"></VueDrag>
-              </div>
-            </template>
-          </draggable>
+          <img class="head_image_url" :src="imageUrl" />
+          <div class="Bzu">
+            <DraggableContainer :prevent-deactivation="false">
+              <draggable class="Bzu" v-model="extraImgs1" itemKey="id" :force-fallback="false" :sort="false"
+                :handle="'forbid'" :fallbackOnBody="false" :group="{ name: 'undraggable', pull: false, put: true }"
+                @start="onStart" @end="onEnd">
+                <template #item="{ element }">
+                  <div class="item_module_center move">
+                    <VueDrag :dargData="element" :id="element.id"></VueDrag>
+                  </div>
+                </template>
+              </draggable>
+            </DraggableContainer>
+          </div>
         </div>
       </div>
       <!-- 右侧 -->
@@ -93,7 +99,7 @@
         <!-- 右侧对齐方式 -->
         <div class="card_alignment">
           <div class="bg_ment">
-            <div class="icon_item_align" v-for="(item, index) in btnAlignment" :key="index">
+            <div class="icon_item_align" v-for="(  item, index  ) in   btnAlignment  " :key="index">
               <el-tooltip class="box-item" :content="item.label" placement="left" effect="light">
                 <span class="iconfont icon_alignment" :class="item.value"></span>
               </el-tooltip>
@@ -112,6 +118,7 @@
 </template>
   
 <script lang="ts" setup>
+import { DraggableContainer } from 'vue3-draggable-resizable'
 import Draggable from "vuedraggable";
 import moduleLibrary from "../components/moduleLibrary.vue";
 import getName from './widgets/getWidget';
@@ -119,11 +126,13 @@ import getName from './widgets/getWidget';
 import VueDrag from '../components/drag/resizable.vue'
 import { attributeValue, layout } from '../module/index';
 import { ref } from "vue";
+import { useRouter } from 'vue-router'
 
 const tabPosition = ref<string>('style');
 const activeName = ref<string>('bank');
 // 默认选择组件库
 const current = ref<string>('1');
+const imageUrl = new URL('@/assets/images/head.png', import.meta.url).href;
 const btnOptions = [
   { label: "撤销", value: 'icon-chexiao' },
   { label: "重做", value: 'icon-zhongzuo' },
@@ -154,12 +163,12 @@ const state = ref({
 
 //拖拽开始的事件
 const onStart = () => {
-  // console.log("开始拖拽");
+  console.log("开始拖拽");
 };
 
 //拖拽结束的事件
-const onEnd = () => {
-  // console.log("结束拖拽");
+const onEnd = (value) => {
+  console.log(value, "结束拖拽");
 };
 
 const onMove = () => {
@@ -168,7 +177,6 @@ const onMove = () => {
   //不允许停靠
   return true;
 };
-
 const getWidget = (name: string) => {
   //组件名映射
   return getName[name]
@@ -185,8 +193,11 @@ const handleReceivedData = (num: any) => {
 function handleClick(): void {
   console.log(24);
 }
+const router = useRouter()
+
 // 发布
 function announce() {
+  router.push('/TestDrag')
   console.log(extraImgs1.value, 999);
 }
 
@@ -375,14 +386,21 @@ function announce() {
 }
 
 .card_home {
-  width: 380px;
+  width: 375px;
   margin: 30px auto 8px;
-  height: 600px;
+  height: 667px;
   background-color: #fafafa;
   position: relative;
   overflow: hidden;
 }
 
+.head_image_url {
+  width: 100%;
+  height: 20px;
+  -webkit-user-drag: none;
+  user-select: none;
+}
+
 .item_module_left {
   cursor: grab;
   display: flex;
@@ -499,22 +517,6 @@ img {
 
 .Bzu {
   height: 100%;
-}
-
-.vdr.active:before {
-  outline: 1px solid #0f73e6;
-}
-
-.vdr .vdr-stick-mr {
-  border-radius: 3px;
-  cursor: ew-resize;
-  height: 12px;
-}
-
-.vdr .vdr-stick {
-  background-color: #fff;
-  background-origin: content-box;
-  background-repeat: no-repeat;
-  border: 1px solid #0f73e6;
+  overflow: hidden;
 }
 </style>

src/views/TestDrag.vue

@@ -0,0 +1,52 @@
+<template>
+    <div style="display: flex;">
+        <div class="left">
+            <!-- <DraggableContainer>
+                <div v-for="(element, index) in extraImgs" :key="index">
+                    <VueDrag class="draggable" :dargData="element"></VueDrag>
+                </div>
+            </DraggableContainer> -->
+            <DraggableContainer :referenceLineColor="'#0f0'">
+                <Vue3DraggableResizable>
+                    <div style="width: 200px;height: 200px;background-color: #fff;">2151</div>
+                </Vue3DraggableResizable>
+                <Vue3DraggableResizable>
+                    <div style="width: 200px;height: 200px;background-color: #fff;">Another test</div>
+                </Vue3DraggableResizable>
+            </DraggableContainer>
+        </div>
+        <div class="left right">
+            <DraggableContainer>
+                <div v-for="( element, index ) in  extraImgs1 " :key="index">
+                    <VueDrag class="draggable" :dargData="element"></VueDrag>
+                </div>
+            </DraggableContainer>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { DraggableContainer } from 'vue3-draggable-resizable'
+import Vue3DraggableResizable from 'vue3-draggable-resizable'
+// import getName from './widgets/getWidget';
+import VueDrag from '../components/drag/resizable.vue'
+import { attributeValue } from '../module/index';
+
+const extraImgs = ref(attributeValue);
+const extraImgs1 = ref([]);
+
+</script>
+
+<style lang="scss" scoped>
+.left {
+    width: 500px;
+    height: 500px;
+    background-color: #DCDFE6;
+    border: 1px solid red;
+}
+
+.right {
+    margin-left: 40px;
+}
+</style>

src/views/widgets/SceneButton.vue

@@ -1,11 +1,13 @@
 <template>
-    <div class="card_btn center_in" :style="{ width: config.css.width + 'px', height: config.css.height + 'px' }">
-        <div class="bg_item_btn center_in">
-            <el-icon :size="config.config.size" :color="config.config.color">
-                <BellFilled />
-            </el-icon>
+    <div class="center_in">
+        <div class="card_btn center_in" :style="{ width: config.css.width + 'px', height: config.css.height + 'px' }">
+            <div class="bg_item_btn center_in">
+                <el-icon :size="config.config.size" :color="config.config.color">
+                    <BellFilled />
+                </el-icon>
+            </div>
+            <div>{{ config.name }}</div>
         </div>
-        <div>{{ config.name }}</div>
     </div>
 </template>
   
@@ -19,6 +21,7 @@ defineProps(["config", "sendSon"])
     flex-direction: column;
     background-color: #fff;
     border-radius: 8px;
+    overflow: hidden;
 }
 
 .bg_item_btn {