參考網(wǎng)址
vue.draggable vue3官網(wǎng)：
https://www.itxst.com/vue-draggable-next/tutorial.html
antvX6 實(shí)現(xiàn)圖表功能
https://x6.antv.vision/zh/examples/gallery

Vue 實(shí)現(xiàn)可視化拖拽頁面編輯器
https://www.jb51.net/article/205203.htm
https://demo-page.raindays.cn/

返回可拖拽區(qū)域的x聚请、y坐標(biāo)與寬高
https://blog.csdn.net/weixin_38318244/article/details/126603904

實(shí)現(xiàn)效果

image.png

image.png

代碼參考

<template>
  <div class='content'>
    <a-row>
      <a-col :span='4'>
        <div class='lists'>
          <draggable
            :list='list'
            animation='300'
            @start='onStart'
            @end='onEnd'
            item-key='id'
            :sort='false'>
            <template #item='{ element }'>
              <div class='item move' :ele='JSON.stringify(element)'>
                <label class='move'>{{ element.name }}</label>
              </div>
            </template>
          </draggable>
        </div>
      </a-col>
      <a-col :span='20'>
        <div class='lists view-content'>
          <div id='container'
               @drop='drog'
               @dragover='dragOver'
          ></div>
        </div>
      </a-col>
    </a-row>
  </div>

</template>

<script lang='ts'>
import { defineComponent, onMounted, reactive, toRefs, ref } from 'vue';
import { Graph } from '@antv/x6';
import draggable from 'vuedraggable';


export default defineComponent({
  name: 'Demo',
  components: {
    draggable,
  },
  setup() {

    //拖拽
    const state = reactive({
      //需要拖拽的數(shù)據(jù)
      list: [
        { name: 'www.itxst.com', id: '0' },
        { name: 'www.baidu.com', id: '1' },
        { name: 'www.google.com', id: '2' },
      ],
      data: {
        // // 節(jié)點(diǎn)
        nodes: [
          // {
          //   id: 'node1', // String普碎，可選，節(jié)點(diǎn)的唯一標(biāo)識
          //   x: 40,       // Number，必選，節(jié)點(diǎn)位置的 x 值
          //   y: 40,       // Number，必選余黎，節(jié)點(diǎn)位置的 y 值
          //   width: 80,   // Number，可選载萌，節(jié)點(diǎn)大小的 width 值
          //   height: 40,  // Number惧财，可選，節(jié)點(diǎn)大小的 height 值
          //   label: 'hello', // String扭仁，節(jié)點(diǎn)標(biāo)簽
          // },
        ],
        // // 邊
        edges: [
          // {
          //   source: 'node1', // String垮衷，必須，起始節(jié)點(diǎn) id
          //   target: 'node2', // String乖坠，必須搀突，目標(biāo)節(jié)點(diǎn) id
          // },
        ],
      },
      active: '',
      x: 0,
      y: 0,
    });
    const graph = ref<any>({});
    const init = () => {
      graph.value = new Graph({
        container: document.getElementById('container'),
        grid: true,
        embedding: {
          enabled: true,
          findParent({ node }) {
            const bbox = node.getBBox();
            return this.getNodes().filter((node) => {
              const data = node.getData<any>();
              if (data && data.parent) {
                const targetBBox = node.getBBox();
                return bbox.isIntersectWithRect(targetBBox);
              }
              return false;
            });
          },
        },
        translating: {
          restrict: -20, // 將移動范圍限制在畫布距離畫布邊緣 20px 處
        },
        highlighting: {
          embedding: {
            name: 'stroke',
            args: {
              padding: -1,
              attrs: {
                stroke: '#73d13d',
              },
            },
          },
        },
      });

      graph.value.addNode({
        x: 200,
        y: 80,
        width: 240,
        height: 160,
        zIndex: 1,
        label: 'Parent',
        attrs: {
          body: {
            fill: '#fffbe6',
            stroke: '#ffe7ba',
          },
          label: {
            fontSize: 12,
          },
        },
        data: {
          parent: true,
        },
      });

      graph.value.on('node:change:parent', ({ node }) => {
        console.log(node);
        // node.attr({
        //   label: {
        //     text: 'Child\n(embed)',
        //   },
        // });
      });
      //刪除
      // graph.value.on('node:mouseenter', ({ node }) => {
      //   if (node === target) {
      //     node.addTools({
      //       name: 'button-remove',
      //       args: {
      //         x: 0,
      //         y: 0,
      //         offset: { x: 10, y: 10 },
      //       },
      //     });
      //   }
      // });
      //
      // graph.value.on('node:mouseleave', ({ node }) => {
      //   if (node === target) {
      //     node.removeTools();
      //   }
      // });

    };
//拖拽開始的事件
    const onStart = (e) => {
      state.active = e.item.attributes.ele.value;
      console.log('開始拖拽');
    };

//拖拽結(jié)束的事件
    const onEnd = () => {
      let siderWidth = document.querySelector('.ant-layout-sider-children').clientWidth;
      let listWidth = document.querySelector('.lists').clientWidth;
      let headerHeight = document.querySelector('.ant-layout-header').clientHeight;
      let tabHeight = document.querySelector('.ant-tabs-top').clientHeight;
      let list = JSON.parse(JSON.stringify(state.list));
      let data = JSON.parse(JSON.stringify(state.data));
      let active = JSON.parse(state.active);
      let width = 150;
      let height = 40;
      //減去元素寬高
      let nowX = state.x - siderWidth - listWidth - width - 25;
      let nowY = state.y - headerHeight - tabHeight - height - 25;
      state.list = list.filter(item => item.id !== active.id);
      let baseNode = {
        id: active.id, // String，可選熊泵，節(jié)點(diǎn)的唯一標(biāo)識
        x: nowX,       // Number仰迁，必選，節(jié)點(diǎn)位置的 x 值
        y: nowY,       // Number顽分，必選徐许，節(jié)點(diǎn)位置的 y 值
        width,   // Number，可選卒蘸，節(jié)點(diǎn)大小的 width 值
        height,  // Number雌隅，可選，節(jié)點(diǎn)大小的 height 值
        label: active.name, // String，節(jié)點(diǎn)標(biāo)簽
      };
      data.nodes.push(baseNode);
      state.data = data;
      graph.value.addNode(baseNode);
      if (data.nodes.length > 1) {
        for (let i = 0; i < data.nodes.length; i++) {
          if (i + 1 < data.nodes.length) {
            let baseEdge = {
              source: data.nodes[i].id,
              target: data.nodes[i + 1].id,
              connector: { name: 'rounded' },
              attrs: {
                line: {
                  sourceMarker: {
                    tagName: 'path',
                    d: 'M 20 -10 0 0 20 10 Z',
                  },
                  targetMarker: {
                    tagName: 'path',
                    d: 'M 20 -10 0 0 20 10 Z',
                    strokeWidth: 2,
                    fill: '#73d13d',
                    stroke: '#237804',
                  },
                },
              },
            };
            graph.value.addEdge(baseEdge);
            data.edges.push(baseEdge);
          }
        }
      }

    };

    const dragOver = (e) => {
      // let className = e.target.className.animVal;
      state.x = e.clientX;
      state.y = e.clientY;
      e.preventDefault();
      e.stopPropagation();

    };
    const drog = (e) => {
      e.preventDefault();
      e.stopPropagation();
    };

    onMounted(() => {
      init();
    });
    return {
      onStart,
      dragOver,
      drog,
      onEnd,
      ...toRefs(state),
    };
  },

});
</script>

<style scoped>
.lists {
  padding: 24px;
  border-right: 1px solid #ddd;

}

.lists > div {
  min-height: 500px;
}

.item {
  border: solid 1px #eee;
  padding: 6px 10px;
  text-align: left;
}

.item:hover {
  cursor: move;
}

.item + .item {
  margin-top: 10px;
}

.ghost {
  border: solid 1px #399bff;
}

.chosenClass {
  background-color: #f1f1f1;
}

.itxst {
  background-color: #f1f1f1;
  display: flex;
  padding: 20px;
  min-height: 500px;
}

.graph .item:not(:first-child) {
  height: 0;
  border: none;
}
</style>