From 16ac68ceb00881d1b7244de6dea956c012b65bd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= <lixg@dongwu-inc.com>
Date: Sun, 9 Oct 2022 09:02:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json            |  11 ++
 package.json                 |   1 +
 src/components/OpenPages.vue |   1 +
 src/views/TestPage.vue       | 249 +++++++++++++++++++++++++++++++++++
 4 files changed, 262 insertions(+)
 create mode 100644 src/views/TestPage.vue

diff --git a/package-lock.json b/package-lock.json
index 15eeab2c..9a92ba29 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "ant-design-vue": "^3.2.12",
         "core-js": "^3.8.3",
         "element-plus": "^2.2.17",
+        "jquery": "^3.6.1",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3",
         "vuex": "^4.0.0"
@@ -6824,6 +6825,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "node_modules/jquery": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
+      "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+    },
     "node_modules/js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
@@ -16576,6 +16582,11 @@
         "@sideway/pinpoint": "^2.0.0"
       }
     },
+    "jquery": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.6.1.tgz",
+      "integrity": "sha512-opJeO4nCucVnsjiXOE+/PcCgYw9Gwpvs/a6B1LL/lQhwWwpbVEVYDZ1FokFr8PRc7ghYlrFPuyHuiiDNTQxmcw=="
+    },
     "js-message": {
       "version": "1.0.7",
       "resolved": "https://registry.npmmirror.com/js-message/-/js-message-1.0.7.tgz",
diff --git a/package.json b/package.json
index 23f7691a..f7f60daa 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
     "ant-design-vue": "^3.2.12",
     "core-js": "^3.8.3",
     "element-plus": "^2.2.17",
+    "jquery": "^3.6.1",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
diff --git a/src/components/OpenPages.vue b/src/components/OpenPages.vue
index c8a1bad1..becbeca6 100644
--- a/src/components/OpenPages.vue
+++ b/src/components/OpenPages.vue
@@ -79,6 +79,7 @@ export default {
   overflow-x: auto;
   .openItems {
     width: 272px;
+    // min-width: 250px;
     height: 50px;
     border: 1px solid #edf2fa;
     border-left: 0px;
diff --git a/src/views/TestPage.vue b/src/views/TestPage.vue
new file mode 100644
index 00000000..4d2b300d
--- /dev/null
+++ b/src/views/TestPage.vue
@@ -0,0 +1,249 @@
+<template>
+  <div class="testPage">
+    <h2>div横向拖拽排序</h2>
+
+    <div class="box">
+      <ul>
+        <li class="drag"><a href="#">导航一</a></li>
+
+        <li class="drag"><a href="#">导航二导航</a></li>
+
+        <li class="drag"><a href="#">导航导航导航三</a></li>
+
+        <li class="drag"><a href="#">导航导航四</a></li>
+
+        <li class="drag"><a href="#">导五</a></li>
+      </ul>
+    </div>
+  </div>
+</template>
+<script>
+import { reactive, toRefs } from "vue";
+import $ from "jquery";
+export default {
+  name: "TestPage",
+  setup() {
+    const state = reactive({});
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+
+$(document).ready(function () {
+  var range = { x: 0, y: 0 }; //鼠标元素偏移量
+  var lastPos = { x: 0, y: 0, x1: 0, y1: 0 }; //拖拽对象的四个坐标
+
+  var tarPos = { x: 0, y: 0, x1: 0, y1: 0 }; //目标元素对象的坐标初始化
+
+  var theDiv = null,
+    move = false;
+
+  var choose = false; //拖拽对象 拖拽状态 选中状态
+
+  // var theDivId = 0;
+  // var theDivHeight = 0;
+  var theDivHalf = 0;
+
+  // var tarFirstY = 0; //拖拽对象的索引、高度、的初始化。
+
+  var tarDiv = null,
+    tarFirst,
+    tempDiv; //要插入的目标元素的对象, 临时的虚线对象
+
+  var initPos = { x: 0, y: 0 };
+
+  var theDivWidth; //拖拽对象的宽度
+
+  $(".drag").each(function () {
+    $(this).mousedown(function (event) {
+      choose = true;
+
+      //拖拽对象
+
+      theDiv = $(this);
+
+      //记录拖拽元素初始位置
+
+      initPos.x = theDiv.position().left;
+
+      initPos.y = theDiv.position().top;
+
+      //鼠标元素相对偏移量
+
+      range.x = event.pageX - theDiv.position().left;
+
+      range.y = event.pageY - theDiv.position().top;
+
+      //  theDivId = theDiv.index();
+
+      theDivWidth = theDiv.width();
+
+      theDivHalf = theDivWidth / 2;
+
+      theDiv.removeClass("drag");
+
+      theDiv.addClass("drag-dash");
+
+      theDiv.css({ left: initPos.x + "px", top: initPos.y + "px" });
+
+      // 创建新元素 插入拖拽元素之前的位置(虚线框)
+
+      $("<div class='dash'></div>").insertBefore(theDiv);
+
+      tempDiv = $(".dash");
+
+      $(".dash").css("width", theDivWidth);
+
+      return false;
+    });
+  });
+
+  $(document)
+    .mouseup(function () {
+      if (!choose) {
+        return false;
+      }
+
+      if (!move) {
+        //恢复对象的初始样式
+
+        theDiv.removeClass("drag-dash");
+
+        theDiv.addClass("drag");
+
+        tempDiv.remove(); // 删除新建的虚线div
+
+        choose = false;
+
+        return false;
+      }
+
+      theDiv.insertBefore(tempDiv); // 拖拽元素插入到 虚线div的位置上
+
+      //恢复对象的初始样式
+
+      theDiv.removeClass("drag-dash");
+
+      theDiv.addClass("drag");
+
+      tempDiv.remove(); // 删除新建的虚线div
+
+      move = false;
+
+      choose = false;
+
+      return false;
+    })
+    .mousemove(function (event) {
+      if (!choose) {
+        return false;
+      }
+
+      move = true;
+
+      lastPos.x = event.pageX - range.x;
+
+      lastPos.y = event.pageY - range.y;
+
+      lastPos.x1 = lastPos.x + theDivWidth;
+
+      // 拖拽元素随鼠标移动
+
+      theDiv.css({ left: lastPos.x + "px", top: lastPos.y + "px" });
+
+      // 拖拽元素随鼠标移动 查找插入目标元素
+
+      var $main = $(".drag"); // 局部变量：按照重新排列过的顺序 再次获取 各个元素的坐标，
+
+      $main.each(function () {
+        tarDiv = $(this);
+
+        tarPos.x = tarDiv.position().left;
+
+        tarPos.y = tarDiv.position().top;
+
+        tarPos.x1 = tarPos.x + tarDiv.width() / 2;
+
+        tarFirst = $main.eq(0); // 获得第一个元素\
+
+        let tarFirstX = tarFirst.position().left + theDivHalf; // 第一个元素对象的中心纵坐标
+
+        //拖拽对象 移动到第一个位置
+
+        if (lastPos.x <= tarFirstX) {
+          tempDiv.insertBefore(tarFirst);
+        }
+
+        //判断要插入目标元素的 坐标后， 直接插入
+
+        if (lastPos.x >= tarPos.x - theDivHalf && lastPos.x1 >= tarPos.x1) {
+          tempDiv.insertAfter(tarDiv);
+        }
+      });
+
+      return false;
+    });
+});
+</script>
+<style scoped lang="scss">
+.testPage {
+  width: 100%;
+  display: flex;
+  background-color: rgba(255, 255, 255, 1);
+  box-shadow: 0px 8px 8px 0px rgba(118, 136, 166, 0.1);
+  overflow-x: auto;
+  .box {
+    position: relative;
+
+    margin-left: 15px;
+
+    padding: 10px;
+
+    padding-right: 0px;
+
+    width: 810px;
+
+    border: blue solid 1px;
+  }
+
+  .box ul {
+    list-style: none;
+
+    overflow: hidden;
+
+    padding: 0;
+
+    margin: 0;
+  }
+
+  .drag {
+    float: left;
+
+    border: #000 solid 1px;
+
+    text-align: center;
+  }
+
+  .box ul li a {
+    display: block;
+
+    padding: 10px 25px;
+  }
+
+  .drag-dash {
+    position: absolute;
+
+    border: #000 solid 1px;
+
+    background: #ececec;
+  }
+
+  .dash {
+    float: left;
+
+    border: 1px solid transparent;
+  }
+}
+</style>