feat(canvas): Place the element where the mouse is released; !#zh: 将元素放在鼠标松开的位置

ly525
1 parent c5edcfaf
Showing 3 changed files with 10 additions and 5 deletions
front-end/h5/src/components/core/editor/drag-mixin.js
front-end/h5/src/components/core/models/element.js
front-end/h5/src/store/modules/element.js
@@ -70,7 +70,7 @@ export default {
   methods: {
     /**
      *
-     * @param {*} element
+     * @param {*} element shortcutItem
      * @param {*} e
      */
     handleDragStartFromMixin (element, e) {
@@ -129,7 +129,7 @@ export default {
       const position = canvasWrapper.getBoundingClientRect()
       this.dragElement && this.clone({
         ...this.dragElement,
-        customStyle: {
+        dragStyle: {
           left: e.clientX - layerX - position.left,
           top: e.clientY - layerY - position.top
         }
@@ -44,7 +44,8 @@ class Element {
     return {
       ...defaultStyle,
       zindex: ele.zindex,
-      ...(ele.extra && ele.extra.defaultStyle)
+      ...(ele.extra && ele.extra.defaultStyle),
+      ...ele.dragStyle // 拖拽结束落点的top、left
     }
   }
  
@@ -52,11 +53,13 @@ class Element {
     if (typeof ele.pluginProps === 'object') {
       return cloneObj({ ...ele.pluginProps, uuid: this.uuid })
     }
-    return this.getDefaultPluginProps(ele.props, ele.shortcutProps)
+    return this.getDefaultPluginProps(ele)
   }
  
   // init prop of plugin
-  getDefaultPluginProps (props = {}, shortcutProps) {
+  getDefaultPluginProps (ele) {
+    const { props = {}, shortcutProps = {} } = ele
+
     let pluginProps = {
       uuid: this.uuid
     }
@@ -41,6 +41,8 @@ export const mutations = {
       case 'add':
         const vm = getVM(value.name)
         vm.$options.shortcutProps = value.shortcutProps
+        // 用于拖拽结束，确定最终放置的位置
+        vm.$options.dragStyle = value.dragStyle // {left: Number, top: Number}
         const element = new Element(vm.$options)
         elements.push(element)
         break