@haluo/biz 2.0.14-beta.3 → 2.0.15-beta.1

package/dist/haluo-biz.js

@@ -2509,7 +2509,9 @@ const _sfc_main = {
       replaceSeamless: 0,
       seamlessCount: 0,
       overLine: "",
-      currentVideo: null
+      currentVideo: null,
+      targetMove: "",
+      moverClasses: ["halo-img-content", "halo-video-content"]
     };
   },
   computed: {
@@ -2796,8 +2798,11 @@ const _sfc_main = {
             this.parseGood(node);
           } else if (node.classList.contains("halo-img-content")) {
             const img = node.querySelector("img");
-            img.setAttribute("tabindex", -1);
+            node.setAttribute("tabindex", -1);
+            node.setAttribute("draggable", true);
+            node.setAttribute("contenteditable", false);
             img.setAttribute("draggable", false);
+            this.setDragMove(node);
             const desc = img.dataset.desc;
             img.style.margin = "0";
             const seamlessFlag = ((_a = JSON.parse(img.getAttribute("data"))) == null ? void 0 : _a.seamlessFlag) || "0";
@@ -2859,6 +2864,9 @@ const _sfc_main = {
       const replaceBtn = me2.insertVideoBtns(me2.editor, video);
       node.appendChild(delBtn);
       node.appendChild(replaceBtn);
+      node.setAttribute("tabindex", -1);
+      node.setAttribute("draggable", true);
+      me2.setDragMove(node);
     },
     async parseArticle(node) {
       const data = JSON.parse(node.dataset.article);
@@ -3240,6 +3248,25 @@ const _sfc_main = {
         this.styleStatus.size = parseInt(this.fontInfo.size) === 100 ? 17 : this.fontInfo.size;
         this.styleStatus.color = this.fontInfo.color;
       });
+      editorDom.ondragover = function(e) {
+        if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+          e.preventDefault();
+        }
+      };
+      editorDom.ondrop = function(e) {
+        if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+          if (e.target.parentNode !== editorDom) {
+            return;
+          }
+          if (e.target === editorDom) {
+            e.target.appendChild(me2.targetMove);
+          } else {
+            e.target.after(me2.targetMove);
+          }
+          me2.targetMove = "";
+          e.preventDefault();
+        }
+      };
       me2.editor.addEventListener("willPaste", function(type, handler) {
         function validateDom() {
           const fragment = type && type.fragment || {};
@@ -3357,8 +3384,10 @@ const _sfc_main = {
         var p = this.createElement("div", {
           "class": "halo-img-content",
           "contenteditable": "false",
-          "draggable": "false"
+          "draggable": "true",
+          "tabindex": "-1"
         }, [...childList]);
+        me2.setDragMove(p);
         this.insertElement(p, range);
         if (isSeameless) {
           me2.removeDefault(p, "nextElementSibling");
@@ -3417,31 +3446,7 @@ const _sfc_main = {
         p.onclick = function() {
           me2.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
         };
-        let targetMove = "";
-        p.ondragstart = function(e) {
-          if (!(e.target.className.indexOf("halo-video-content") < 0)) {
-            e.dataTransfer.setData("text/html", e.target);
-            e.dataTransfer.effectAllowed = "move";
-            e.dataTransfer.dropEffect = "move";
-            targetMove = e.target;
-          }
-        };
-        editorDom.ondragover = function(e) {
-          if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-            e.preventDefault();
-          }
-        };
-        editorDom.ondrop = function(e) {
-          if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-            if (e.target === editorDom) {
-              e.target.appendChild(targetMove);
-            } else {
-              e.target.after(targetMove);
-            }
-            targetMove = "";
-            e.preventDefault();
-          }
-        };
+        me2.setDragMove(p);
         this.insertElement(p);
         setTimeout(() => {
           document.documentElement.scrollTop = scrollTop;
@@ -3465,6 +3470,18 @@ const _sfc_main = {
       };
       me2.sticky();
     },
+    setDragMove(p) {
+      const className = p.getAttribute("class");
+      const me2 = this;
+      p.ondragstart = function(e) {
+        if (!(e.target.className.indexOf(className) < 0)) {
+          e.dataTransfer.setData("text/html", e.target);
+          e.dataTransfer.effectAllowed = "move";
+          e.dataTransfer.dropEffect = "move";
+          me2.targetMove = e.target;
+        }
+      };
+    },
     removeDefault(next, key) {
       const me2 = this;
       const cur = next[key];

package/dist/haluo-biz.umd.cjs

@@ -2511,7 +2511,9 @@
         replaceSeamless: 0,
         seamlessCount: 0,
         overLine: "",
-        currentVideo: null
+        currentVideo: null,
+        targetMove: "",
+        moverClasses: ["halo-img-content", "halo-video-content"]
       };
     },
     computed: {
@@ -2798,8 +2800,11 @@
               this.parseGood(node);
             } else if (node.classList.contains("halo-img-content")) {
               const img = node.querySelector("img");
-              img.setAttribute("tabindex", -1);
+              node.setAttribute("tabindex", -1);
+              node.setAttribute("draggable", true);
+              node.setAttribute("contenteditable", false);
               img.setAttribute("draggable", false);
+              this.setDragMove(node);
               const desc = img.dataset.desc;
               img.style.margin = "0";
               const seamlessFlag = ((_a = JSON.parse(img.getAttribute("data"))) == null ? void 0 : _a.seamlessFlag) || "0";
@@ -2861,6 +2866,9 @@
         const replaceBtn = me2.insertVideoBtns(me2.editor, video);
         node.appendChild(delBtn);
         node.appendChild(replaceBtn);
+        node.setAttribute("tabindex", -1);
+        node.setAttribute("draggable", true);
+        me2.setDragMove(node);
       },
       async parseArticle(node) {
         const data = JSON.parse(node.dataset.article);
@@ -3242,6 +3250,25 @@
           this.styleStatus.size = parseInt(this.fontInfo.size) === 100 ? 17 : this.fontInfo.size;
           this.styleStatus.color = this.fontInfo.color;
         });
+        editorDom.ondragover = function(e) {
+          if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+            e.preventDefault();
+          }
+        };
+        editorDom.ondrop = function(e) {
+          if (me2.targetMove && me2.moverClasses.includes(me2.targetMove.className)) {
+            if (e.target.parentNode !== editorDom) {
+              return;
+            }
+            if (e.target === editorDom) {
+              e.target.appendChild(me2.targetMove);
+            } else {
+              e.target.after(me2.targetMove);
+            }
+            me2.targetMove = "";
+            e.preventDefault();
+          }
+        };
         me2.editor.addEventListener("willPaste", function(type, handler) {
           function validateDom() {
             const fragment = type && type.fragment || {};
@@ -3359,8 +3386,10 @@
           var p = this.createElement("div", {
             "class": "halo-img-content",
             "contenteditable": "false",
-            "draggable": "false"
+            "draggable": "true",
+            "tabindex": "-1"
           }, [...childList]);
+          me2.setDragMove(p);
           this.insertElement(p, range);
           if (isSeameless) {
             me2.removeDefault(p, "nextElementSibling");
@@ -3419,31 +3448,7 @@
           p.onclick = function() {
             me2.setToast("\u4E0D\u652F\u6301\u64AD\u653E");
           };
-          let targetMove = "";
-          p.ondragstart = function(e) {
-            if (!(e.target.className.indexOf("halo-video-content") < 0)) {
-              e.dataTransfer.setData("text/html", e.target);
-              e.dataTransfer.effectAllowed = "move";
-              e.dataTransfer.dropEffect = "move";
-              targetMove = e.target;
-            }
-          };
-          editorDom.ondragover = function(e) {
-            if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-              e.preventDefault();
-            }
-          };
-          editorDom.ondrop = function(e) {
-            if (targetMove && !(targetMove.className.indexOf("halo-video-content") < 0)) {
-              if (e.target === editorDom) {
-                e.target.appendChild(targetMove);
-              } else {
-                e.target.after(targetMove);
-              }
-              targetMove = "";
-              e.preventDefault();
-            }
-          };
+          me2.setDragMove(p);
           this.insertElement(p);
           setTimeout(() => {
             document.documentElement.scrollTop = scrollTop;
@@ -3467,6 +3472,18 @@
         };
         me2.sticky();
       },
+      setDragMove(p) {
+        const className = p.getAttribute("class");
+        const me2 = this;
+        p.ondragstart = function(e) {
+          if (!(e.target.className.indexOf(className) < 0)) {
+            e.dataTransfer.setData("text/html", e.target);
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.dropEffect = "move";
+            me2.targetMove = e.target;
+          }
+        };
+      },
       removeDefault(next, key) {
         const me2 = this;
         const cur = next[key];

package/dist/style.css

@@ -806,6 +806,7 @@
   position: relative;
   text-align: center;
   left: 250px;
+  outline: none;
 }
 .editor #editor-content .halo-img-content .img-loading,
 .editor #editor-content .halo-img-content .img-fail {
@@ -936,6 +937,7 @@
   margin: 5px;
   padding-right: 5px;
   position: relative;
+  outline: none;
 }
 .editor #editor-content .halo-video-content .video-delete {
   width: 18px;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@haluo/biz",
   "description": "rich text",
-  "version": "2.0.14-beta.3",
+  "version": "2.0.15-beta.1",
   "type": "module",
   "module": "./dist/haluo-biz.js",
   "main": "./dist/haluo-biz.umd.cjs",