工程专业定额库拖动排序

web/users/css/custom.css

@@ -18,4 +18,24 @@
 
 .btn-link:focus, .btn-link:hover{
   text-decoration: none
+}
+.highlight {
+  background: #eee;
+}
+.dragging {
+  opacity: .5;
+  background: #eee;
+}
+.cursor-default {
+  cursor: default;
+}
+.cursor-move {
+  cursor: move;
+}
+/* 不禁止的话，drag过程中经过子元素也会触发dragleave事件导致屏闪 */
+[draggable=true]:hover {
+  background: rgb(240, 240, 240);
+}
+[draggable=true] span{
+  pointer-events: none;
 }

web/users/js/compilation.js

@@ -135,34 +135,91 @@ $(document).ready(function() {
 
     //新增定额库
     $("#add-ration").click(function () {
-         let rationLib = $("select[name='ration_lib']").children("option:selected").val();
-         let rationLibString = $("select[name='ration_lib']").children("option:selected").text();
-         if(rationLib == undefined || rationLib ==''){
-             alert("请选择定额库");
-             return;
-         }
-        if($("input:hidden[name=ration_lib][data-id = "+rationLib+"]").length <= 0){
+        let rationLib = $("select[name='ration_lib']").children("option:selected").val();
+        let rationLibString = $("select[name='ration_lib']").children("option:selected").text();
+        if (rationLib == undefined || rationLib == '') {
+            alert("请选择定额库");
+            return;
+        }
+        if ($("input:hidden[name=ration_lib][data-id = " + rationLib + "]").length <= 0) {
             let tem = {
-                id:rationLib,
-                name:rationLibString,
-                isDefault:false
+                id: rationLib,
+                name: rationLibString,
+                isDefault: false
             };
             let htmlString = ` 
-                <tr class='ration_tr'>
-                     <td><span>${tem.name}</span></td>
-                     <td><label class="form-check-label"> <input class="form-check-input" name="ration_isDefault"  value="${tem.id}" type="radio"></td>  
-                     <td>
-                            <a class='btn btn-link btn-sm ' style="padding: 0px" onclick='deleteTableTr(this,"ration_tr")'>删除</a>
-                            <input type="hidden" name="ration_lib" data-id="${tem.id}" value='${JSON.stringify(tem)}'>
-                      </td>
+                <tr class='ration_tr' draggable="true">
+                    <td><span class="cursor-default">${tem.name}</span></td>
+                    <td><label class="form-check-label"> <input class="form-check-input" name="ration_isDefault"  value="${tem.id}" type="radio"></td>  
+                    <td>
+                        <a class='btn btn-link btn-sm ' style="padding: 0px" onclick='deleteTableTr(this,"ration_tr")'>删除</a>
+                        <input type="hidden" name="ration_lib" data-id="${tem.id}" value='${JSON.stringify(tem)}'>
+                    </td>
                 </tr>`
             $("#ration_tbody").append(htmlString);
-        }else {
+        } else {
             alert('已存在相同的定额库')
         }
         $("#addRation").modal('hide');
     });
 
+    // 拖动排序
+    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');
+        ev.originalEvent.dataTransfer.effectAllowed = 'move';
+    });
+    $(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事件不触发
+    });
+    $(rationBodySelector).on('dragenter', dragSelector, function (ev) {
+        if (this !== dragged) {
+            $(this).addClass('highlight');
+        }
+    });
+    $(rationBodySelector).on('dragleave', dragSelector, function (ev) {
+        if (this !== dragged) {
+            $(this).removeClass('highlight');
+        }
+    });
+    $(rationBodySelector).on('drop', dragSelector, function (ev) {
+        $(this).removeClass('highlight');
+        $(this).after($(dragged));
+    });
+
     // 新增计价规则
     $("#add-valuation").click(function() {
         try {

web/users/views/compilation/engineering.html

@@ -305,9 +305,9 @@
                                 <tbody id="ration_tbody">
                                 <% if (Object.keys(libData).length > 0 && libData.ration_lib.length > 0) { %>
                                 <% libData.ration_lib.forEach(function (ration, index){ %>
-                                <tr class='ration_tr'>
+                                <tr class='ration_tr' draggable="true">
                                     <td>
-                                        <span><%= ration.name%></span>
+                                        <span class="cursor-default"><%= ration.name%></span>
                                     </td>
                                     <td>
                                         <label class="form-check-label">