feat: 实现页面拖放功能

.prettierrc

@@ -1 +1,6 @@
-{}
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true
+}

lib/main.js

@@ -1,100 +1,118 @@
-import { h } from "./element.js";
-import { draggable } from "./draggable.js";
-import "./style.css";
+import interact from 'interactjs'
+import { h } from './element.js'
+import './style.css'
 
 export class Chat {
   constructor(options = {}) {
-    this.targetEl = h("div", options.style || "absoulte right-9 bottom-9");
+    this.targetEl = h('div', options.style || 'absoulte right-9 bottom-9')
+    this.targetEl.addClass('mypandora-chat')
 
-    this.chatBtn = null;
-    this.chatMain = null;
+    this.chatBtn = null
+    this.chatMain = null
 
-    this.buildBtn(options);
+    this.buildBtn(options)
 
-    document.body.append(this.targetEl.el);
+    this.addDraggable();
+
+    document.body.append(this.targetEl.el)
   }
 
   show() {
     //
     // this.targetEl.classList.add('w-[900px] h-[640px] bg-gray-200');
     // 隐藏图标，显示主窗口
-    this.chatBtn?.hide();
+    this.chatBtn?.hide()
     if (!this.chatMain) {
-      this.buildMain();
+      this.buildMain()
     }
-    this.chatMain.show();
+    this.chatMain.show()
   }
 
   close() {
     //
   }
 
   buildBtn(options) {
-    const fragment = document.createDocumentFragment();
+    const fragment = document.createDocumentFragment()
 
     this.chatBtn = h(
-      "div",
-      "w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white cursor-pointer",
-    );
-    this.chatBtn.attr("title", options.tooltip || "展开");
+      'div',
+      'w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white cursor-pointer'
+    )
+    this.chatBtn.attr('title', options.tooltip || '展开')
     // 在这个 div 中添加 svg, img
     if (options.icon) {
-      this.chatBtn.html(options.icon);
+      this.chatBtn.html(options.icon)
     }
-    this.chatBtn.on("click", () => {
-      this.show();
-    });
-    fragment.append(this.chatBtn.el);
+    this.chatBtn.on('click', () => {
+      this.show()
+    })
+    fragment.append(this.chatBtn.el)
 
-    this.targetEl.el.append(fragment);
+    this.targetEl.el.append(fragment)
   }
 
   buildMain() {
-    const fragment = document.createDocumentFragment();
-    this.chatMain = h("div", "w-[900px] h-[640px] flex");
+    const fragment = document.createDocumentFragment()
+    this.chatMain = h('div', 'w-[900px] h-[640px] flex')
 
-    const aside = h("div", "min-w-16 w-16 bg-[rgb(46,46,46)]");
+    const aside = h('div', 'min-w-16 w-16 bg-[rgb(46,46,46)]')
     const section = h(
-      "div",
-      "min-w-52 w-52 bg-neutral-200 border-r border-neutral-300",
-    );
-    const main = h("div", "flex-1 flex flex-col");
+      'div',
+      'min-w-52 w-52 bg-neutral-200 border-r border-neutral-300'
+    )
+    const main = h('div', 'flex-1 flex flex-col')
 
     const toolbar = h(
-      "div",
-      "bg-neutral-100 h-12 flex items-center justify-end border-b border-neutral-300",
-    );
-    const closeIcon = h("span", "cursor-pointer");
-    closeIcon.on("click", () => {
-      this.chatBtn?.show();
-      this.chatMain?.hide();
-    });
+      'div',
+      'bg-neutral-100 h-12 flex items-center justify-end border-b border-neutral-300'
+    )
+    const closeIcon = h('span', 'cursor-pointer')
+    closeIcon.on('click', () => {
+      this.chatBtn?.show()
+      this.chatMain?.hide()
+    })
 
     closeIcon.html(
-      '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>',
-    );
-    toolbar.child(closeIcon);
-
-    draggable(document.body, toolbar.el, this.targetEl.el);
+      '<svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>'
+    )
+    toolbar.child(closeIcon)
 
-    const foo = h("div", "flex-1 bg-neutral-100 border-b border-neutral-300");
+    const messageList = h('div', 'flex-1 bg-neutral-100 border-b border-neutral-300')
 
-    const message = h("div", "bg-neutral-100 h-40");
-    const toolbar2 = h("div", "flex justify-end");
-    toolbar2.h;
+    const messageInput = h('div', 'bg-neutral-100 h-40')
+    const toolbar2 = h('div', 'flex justify-end')
     const input = h(
-      "textarea",
-      "w-full h-full bg-neutral-100 border-none resize-none focus:outline-none p-4",
-    );
-    message.children(toolbar2, input);
+      'textarea',
+      'w-full h-full bg-neutral-100 border-none resize-none focus:outline-none p-4'
+    )
+    messageInput.children(toolbar2, input)
 
-    main.children(toolbar, foo, message);
+    main.children(toolbar, messageList, messageInput)
 
-    this.chatMain.children(aside, section, main);
-    fragment.append(this.chatMain.el);
+    this.chatMain.children(aside, section, main)
+    fragment.append(this.chatMain.el)
+
+    this.targetEl.el.append(fragment)
+  }
 
-    this.targetEl.el.append(fragment);
+  addDraggable() {
+    const position = { x: 0, y: 0 }
+
+    interact('.mypandora-chat').draggable({
+      listeners: {
+        start(event) {
+          console.log(event.type, event.target)
+        },
+        move(event) {
+          position.x += event.dx
+          position.y += event.dy
+
+          event.target.style.transform = `translate(${position.x}px, ${position.y}px)`
+        },
+      },
+    })
   }
 }
 
-export default Chat;
+export default Chat

package.json

@@ -23,6 +23,9 @@
   "lint-staged": {
     "**/*": "prettier --write --ignore-unknown"
   },
+  "dependencies": {
+    "interactjs": "^1.10.27"
+  },
   "devDependencies": {
     "@eslint/js": "^9.5.0",
     "autoprefixer": "^10.4.19",