feat: support drag&drop element from the left panel to the canvas; !#: 支持从左侧元素列表中拖拽元素至中间画布

ly525 · 小小鲁班
1 parent f002c516
Showing 4 changed files with 173 additions and 61 deletions
front-end/h5/src/components/core/editor/drag-mixin.js
front-end/h5/src/components/core/editor/index.js
front-end/h5/src/components/core/editor/shortcuts-panel/index.js
front-end/h5/src/components/core/styles/index.scss
+/*
+ * @Author: ly525
+ * @Date: 2020-05-17 17:21:04
+ * @LastEditors: ly525
+ * @LastEditTime: 2020-05-24 18:09:23
+ * @FilePath: /luban-h5/front-end/h5/src/components/core/editor/drag-mixin.js
+ * @Github: https://github.com/ly525/luban-h5
+ * @Copyright 2018 - 2019 luban-h5. All Rights Reserved
+ * @Description:
+ *  组件拖拽至画布功能
+ *  其中部分代码参考自：https://github.com/hakubox/haku-form-design，已经征得作者同意，目的是后续考虑做 tab 之类的嵌套容器
+ */
+
+let dragDom = null
+
+let dragConfig = {
+  isPreDrag: false, // 准备拖拽
+  isDrag: false, // 正式拖拽
+  origin: {
+    clientY: 0, // 鼠标按下时候时候值
+    clientX: 0,
+    layerX: 0, // 鼠标.x 相对于元素左上角.left 的偏移
+    layerY: 0 // 鼠标.y 相对于元素左上角.top  的偏移
+  }
+}
+
+class Drag {
+  constructor (options) {
+    this.mousedown = options.mousedown
+    this.mousemove = options.mousemove
+    this.mouseup = options.mouseup
+
+    this._mousedown = this._mousedown.bind(this)
+    this._mousemove = this._mousemove.bind(this)
+    this._mouseup = this._mouseup.bind(this)
+  }
+
+  start (e) {
+    this._mousedown(e)
+  }
+
+  _mousedown (e) {
+    this.mousedown(e)
+    this.toggleListener('add')
+  }
+
+  _mousemove (e) {
+    console.log('mousemove')
+    this.mousemove(e)
+  }
+
+  _mouseup (e) {
+    console.log('mouseup')
+    this.mouseup(e)
+    this.toggleListener('remove')
+  }
+
+  toggleListener (action) {
+    document[`${action}EventListener`]('mousemove', this._mousemove)
+    document[`${action}EventListener`]('mouseup', this._mouseup)
+  }
+}
+
+export default {
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    /**
+     *
+     * @param {*} element
+     * @param {*} e
+     */
+    handleDragStartFromMixin (element, e) {
+      // https://developer.mozilla.org/zh-CN/docs/Web/API/event.button
+      // 0 为 左键点击.
+      if (e.button !== 0) return
+      if (dragDom) {
+        document.body.removeChild(dragDom)
+        dragDom = null
+      }
+      this.dragElement = element
+      dragDom = e.target.cloneNode(true)
+      document.body.appendChild(dragDom)
+
+      new Drag({
+        mousedown: this.mousedown,
+        mousemove: this.mousemove,
+        mouseup: this.mouseup
+      }).start(e)
+    },
+    /**
+     *
+     * @param {*} e
+     */
+    mousedown (e) {
+      // 鼠标.x 相对于元素左上角 的偏移
+      const { layerX, layerY } = e
+      dragConfig.origin.layerX = layerX
+      dragConfig.origin.layerY = layerY
+      dragConfig.origin.clientX = e.clientX
+      dragConfig.origin.clientY = e.clientY
+
+      dragDom.style.position = 'absolute'
+      dragDom.style.left = e.clientX - layerX + 'px'
+      dragDom.style.top = e.clientY - layerY + 'px'
+      dragDom.classList.add('dragging-dom-ele', 'hidden')
+
+      dragConfig.isPreDrag = true
+    },
+    /** 组件拖拽中 */
+    mousemove (e) {
+      dragDom.classList.remove('hidden')
+      const { layerX, layerY } = dragConfig.origin
+      dragDom.style.left = e.clientX - layerX + 'px'
+      dragDom.style.top = e.clientY - layerY + 'px'
+    },
+    mouseup (e) {
+      const { layerX, layerY } = dragConfig.origin
+      document.body.removeChild(dragDom)
+      dragDom = null
+
+      const canvasWrapper = document.querySelector('.canvas-wrapper')
+      const position = canvasWrapper.getBoundingClientRect()
+      this.dragElement && this.clone({
+        ...this.dragElement,
+        customStyle: {
+          left: e.clientX - layerX - position.left,
+          top: e.clientY - layerY - position.top
+        }
+      })
+    }
+  },
+  updated () {
+    console.log('updated')
+  }
+}
@@ -22,26 +22,7 @@ import LangSelect from &#39;@/components/common/header/LangSelect.vue&#39;
 import Feedback from '@/components/common/feedback/index'
 import AdjustLineV from '@/components/core/support/adjust-line/vertical'
-// const sidebarMenus = [
-//   {
-//     i18nLabel: 'editor.sidebar.components',
-//     label: '组件列表',
-//     value: 'pluginList',
-//     antIcon: 'bars'
-//   },
-//   {
-//     i18nLabel: 'editor.sidebar.pages',
-//     label: '页面管理',
-//     value: 'pageManagement',
-//     antIcon: 'snippets'
-//   },
-//   {
-//     i18nLabel: 'editor.sidebar.templates',
-//     label: '免费模板',
-//     value: 'freeTemplate',
-//     antIcon: 'appstore'
-//   }
-// ]
+import DragMixin from './drag-mixin'
 const fixedTools = [
   {
@@ -103,6 +84,7 @@ const fixedTools = [
 ]
 export default {
+  mixins: [DragMixin],
   name: 'Editor',
   components: {
     LogoOfHeader,
@@ -184,7 +166,11 @@ export default {
                 <strong>{ this.$t('editor.tip.click') }</strong>{ this.$t('editor.tip.click') }
               </i18n>
             </div>
-            <RenderShortcutsPanel pluginsList={this.pluginsList} handleClickShortcut={this.clone} />
+            <RenderShortcutsPanel
+              pluginsList={this.pluginsList}
+              handleClickShortcut={this.clone}
+              handleDragStart={this.handleDragStartFromMixin}
+            />
           </a-tab-pane>
           <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
             <RenderPageManager
@@ -202,46 +188,6 @@ export default {
           </a-tab-pane>
         </a-tabs>
       )
-      // switch (this.activeMenuKey) {
-      //   case sidebarMenus[0].value:
-      //     return (
-      //       <a-tabs
-      //         style="height: 100%;"
-      //         tabBarGutter={10}
-      //       >
-      //         <a-tab-pane key="plugin-list" tab={this.$t('editor.sidebar.components')}>
-      //           <RenderShortcutsPanel pluginsList={this.pluginsList} handleClickShortcut={this.clone} />
-      //         </a-tab-pane>
-      //         <a-tab-pane key='page-manager' tab={this.$t('editor.sidebar.pages')}>
-      //           <RenderPageManager
-      //             pages={this.pages}
-      //             editingPage={this.editingPage}
-      //             onSelectMenuItem={(menuKey) => {
-      //               this.pageManager({ type: menuKey })
-      //             }}
-      //             onEditTitle={({ pageIndexForEditingTitle, newTitle }) => {
-      //               this.pageManager({ type: 'editTitle', value: { pageIndexForEditingTitle, newTitle } })
-      //               this.saveWork({ isSaveCover: false })
-      //             }}
-      //             onSelectPage={(pageIndex) => { this.setEditingPage(pageIndex) }}
-      //           />
-      //         </a-tab-pane>
-      //       </a-tabs>
-      //     )
-      //   case sidebarMenus[1].value:
-      //     return (
-      //       <RenderPageManager
-      //         pages={this.pages}
-      //         editingPage={this.editingPage}
-      //         onSelectMenuItem={(menuKey) => {
-      //           this.pageManager({ type: menuKey })
-      //         }}
-      //         onSelectPage={(pageIndex) => { this.setEditingPage(pageIndex) }}
-      //       />
-      //     )
-      //   default:
-      //     return null
-      // }
     }
   },
   mounted () {
@@ -11,6 +11,10 @@ export default {
     },
     handleClickShortcut: {
       type: Function
+    },
+    handleDragStart: {
+      type: Function,
+      default: (e) => {}
     }
   },
   data: () => ({
@@ -97,6 +101,7 @@ export default {
             <a-col span={12} style={{ marginTop: '10px' }}>
               <ShortcutButton
                 clickFn={this.onClickShortcut.bind(this, plugin)}
+                mousedownFn={this.handleDragStart.bind(this, plugin)}
                 // title={plugin.title}
                 title={plugin.i18nTitle[this.currentLang] || plugin.title}
                 faIcon={plugin.icon}
@@ -52,6 +52,28 @@
   }
 }
+.hidden {
+  display: none !important;
+}
+
+// 拖拽出来的控件
+.dragging-dom-ele {
+  position: fixed !important;
+  z-index: 100;
+
+  display: inline-block;
+  box-sizing: border-box;
+
+  height: 30px;
+  width: 130px;
+  border-radius: 4px;
+  border: 1px solid #CCC;
+
+  cursor: grabbing;
+  user-select: none;
+  opacity: 0.6;
+}
+
 .ant-tabs-nav .ant-tabs-tab {
   padding: 12px 0 !important;
 }