feat: 实现首页项目拖拽排序功能以及部分功能优化 (#955)

* feat: 首页项目拖拽排序功能

* feat: 增加首页项目拖拽排序增加只能管理员进行, 排序失败元素回到原本位置

* perf: 新建文章以后直接进入到编辑文章页面

* perf: 优化文档打开时或刷新时样式闪动问题

static/css/main.css

@@ -288,7 +288,8 @@ body .scrollbar-track-color {
     padding-left: 15px;
     padding-right: 15px;
     margin: 18px 0;
-    height: 280px
+    height: 280px;
+    border: 1px solid #ffffff;
 }
 
 .manual-list .list-item .manual-item-standard {

static/js/sort.js

@@ -0,0 +1,73 @@
+let draggedItem = null;
+let draggedItemIndex = null;
+
+document.querySelectorAll('.list-item').forEach(item => {
+    item.addEventListener('mousedown', function() {
+        draggedItem = item;
+        // 获取当前item在list-item中的索引
+        const parentNode = item.parentNode;
+        draggedItemIndex = Array.from(parentNode.children).indexOf(draggedItem);
+        item.setAttribute('draggable', true);
+    });
+
+    item.addEventListener('dragstart', function() {
+    });
+
+    item.addEventListener('dragover', function(e) {
+        e.preventDefault();
+        if (draggedItem !== item) {
+            item.style.border = '1px dashed #d4d4d5';
+        }
+    });
+
+    item.addEventListener('dragleave', function() {
+        item.style.border = '';
+    });
+
+    item.addEventListener('drop', function() {
+        item.style.border = '';
+        if (draggedItem !== null) {
+            const parentNode = item.parentNode;
+            const draggedIndex = Array.from(parentNode.children).indexOf(draggedItem);
+            const targetIndex = Array.from(parentNode.children).indexOf(item);
+
+            if (draggedIndex < targetIndex) {
+                parentNode.insertBefore(draggedItem, item.nextSibling);
+            } else {
+                parentNode.insertBefore(draggedItem, item);
+            }
+            // 获取当前最新的data-id属性列表 去除null
+            const newSortList = Array.from(parentNode.children).map(item => item.getAttribute('data-id')).filter(item => item !== null);
+            const newSortListStr = newSortList.join(',');
+            // 更新排序
+            $.ajax({
+                url: window.updateBookOrder,
+                type: 'POST',
+                data: {
+                    ids: newSortListStr,
+                },
+                success: function (res) {
+                    if (res.errcode === 0) {
+                        layer.msg("排序成功", {icon: 1});
+                        draggedItem = null;
+                    } else {
+                        layer.msg(res.message, {icon: 2});
+                        const parentNode = item.parentNode;
+                        // 在parentNode中找到当前拖拽的item
+                        const draggedIndex = Array.from(parentNode.children).indexOf(draggedItem);
+                        console.log('draggedIndex:', draggedIndex);
+                        // 移除当前拖拽的item
+                        parentNode.removeChild(draggedItem);
+                        // 将draggedItem放到原来的位置
+                        parentNode.insertBefore(draggedItem, parentNode.children[draggedItemIndex]);
+                        draggedItem = null;
+                    }
+                },
+                error: function (err) {
+                    console.log('error:', err)
+                    draggedItem = null;
+                }
+            })
+        }
+    });
+});

static/jstree/3.3.4/themes/default/style.css

@@ -86,7 +86,7 @@
 .jstree-wholerow-ul {
   position: relative;
   display: inline-block;
-  min-width: 100%;
+  width: 100%;
 }
 .jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
   cursor: pointer;