处理排序滚动条

web/users/css/custom.css

@@ -33,6 +33,9 @@
   cursor: move;
 }
 /* 不禁止的话，drag过程中经过子元素也会触发dragleave事件导致屏闪 */
+[draggable=true]:hover {
+  background: rgb(240, 240, 240);
+}
 [draggable=true] span{
   pointer-events: none;
 }

web/users/js/compilation.js

@@ -166,8 +166,30 @@ $(document).ready(function() {
     // 拖动排序
     const dragSelector = '.ration_tr[draggable=true]';
     const rationBodySelector = '#ration_tbody';
+    const wrapper = $('.panel-content')[0];
     let dragged;
+    let rID = null;
+    const scrollStep = 6;
+    // 表格数据过多的时候，靠下方的条目想要移动到上方，需要滚动条滚动到相应位置，滚动条向上滚动需要代码自行处理
+    function scroll(ele, step) {
+        wrapper.scrollTop -= step;
+        rID = window.requestAnimationFrame(() => {
+            scroll(ele, step);
+        });
+    }
     // 动态绑定(新增的也能监听到)
+    $(rationBodySelector).on('drag', dragSelector, function (ev) {
+        const { clientX, clientY } = ev;
+        const dom = document.elementFromPoint(clientX, clientY);
+        if (dom.tagName === 'H2' && !rID) {
+            rID = window.requestAnimationFrame(() => {
+                scroll(wrapper, scrollStep);
+            })
+        } else if (dom.tagName !== 'H2' && rID) {
+            window.cancelAnimationFrame(rID);
+            rID = null;
+        }
+    });
     $(rationBodySelector).on('dragstart', dragSelector, function (ev) {
         dragged = this;
         $(this).addClass('dragging');
@@ -175,6 +197,10 @@ $(document).ready(function() {
     });
     $(rationBodySelector).on('dragend', dragSelector, function (ev) {
         $(this).removeClass('dragging');
+        if (rID) {
+            window.cancelAnimationFrame(rID);
+            rID = null;
+        }
     });
     $(rationBodySelector).on('dragover', dragSelector, function (ev) {
         ev.preventDefault(); // 必须调用此方法，否则drop事件不触发