首页 新闻 赞助 找找看

如何实现table多行拖动?

0
悬赏园豆:50 [待解决问题]

一直想搞个拖动table行排序的功能。在网上找到一个前端美女做的例子感觉很不错。遗憾的是没有多选行拖动的功能。也没有置顶,置尾的功能。求教如何在这个基础上加一个多选拖动的功能。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>原生JS实现拖动表格行、及表格列自动排序的方法(快速排序)</title>
<style type="text/css">
<!--
#draggableTable{
    -moz-user-select:none; 
}
#draggableTable td{
    border-right: 1px solid gray; 
    border-bottom: 1px solid gray; 
    background: #fff; 
    font-size:11px; 
    padding: 6px 6px 6px 12px;
    text-align: center;
}
#draggableTable a{
    text-decoration:none;
}
#draggableTable thead th{
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    border-right: 1px solid gray; 
    border-bottom: 1px solid gray; 
    border-top: 1px solid gray; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    text-align: center; 
    padding: 6px 6px 6px 12px; 
    background: #CAE8EA; 
}
#draggableTable tbody th{    
    border-left: 1px solid gray;
    border-bottom: 1px solid gray;
    border-right: 1px solid gray;
    background: #fff; 
    font-size:11px; 
    padding: 6px 6px 6px 12px;
    text-align:center;
    font-weight:normal;
}
#draggableTable thead th:first-child{
    border: 1px solid gray; 
}
-->
</style>
</head>

<body>
  <div id="draggableTableDiv" onselectstart="return false">
    <table cellspacing="0" cellpadding="0" id="draggableTable">
    <thead>
      <tr>
        <th scope="col"><a href="javascript:;" dataitem="id">序号</a></th>
        <th scope="col">名称</th>
        <th scope="col"><a href="javascript:;" dataitem="amount">数量</a></th>
        <th scope="col"><a href="javascript:;" dataitem="price">单价(点卡)</a></th>
        <th scope="col"><a href="javascript:;" dataitem="total">总计(点卡)</a></th>
      </tr>
     </thead>
     <tbody>
      <tr>
        <th>1</th>
        <td>农场化肥A</td>
        <td>2</td>
        <td>50</td>
        <td>100</td>
      </tr>
      <tr>
        <th>2</th>
        <td>飞车道具C</td>
        <td>1</td>
        <td>80</td>
        <td>80</td>
      </tr>
      <tr>
        <th>3</th>
        <td>空间装扮K</td>
        <td>1</td>
        <td>120</td>
        <td>120</td>
      </tr>
      <tr>
        <th>4</th>
        <td>农场狗粮C</td>
        <td>4</td>
        <td>60</td>
        <td>240</td>
      </tr>
      <tr>
        <th>5</th>
        <td>音速种子</td>
        <td>2</td>
        <td>110</td>
        <td>220</td>
      </tr>
      <tr>
        <th>6</th>
        <td>农场化肥D</td>
        <td>5</td>
        <td>60</td>
        <td>300</td>
      </tr>
      <tr>
        <th>7</th>
        <td>AVA装扮C</td>
        <td>1</td>
        <td>300</td>
        <td>300</td>
      </tr>
      <tr>
        <th>8</th>
        <td>三国道具C</td>
        <td>15</td>
        <td>60</td>
        <td>900</td>
      </tr>
      <tr>
        <th>9</th>
        <td>DNF道具B</td>
        <td>4</td>
        <td>300</td>
        <td>1200</td>
      </tr>
      <tr>
        <th>10</th>
        <td>农场化肥H</td>
        <td>1</td>
        <td>80</td>
        <td>80</td>
      </tr>
      <tr>
        <th>11</th>
        <td>农场化肥B</td>
        <td>1</td>
        <td>80</td>
        <td>80</td>
      </tr>
      <tr>
        <th>12</th>
        <td>Q宠元宝</td>
        <td>100</td>
        <td>1</td>
        <td>100</td>
      </tr>
      <tr>
        <th>13</th>
        <td>三国道具K</td>
        <td>9</td>
        <td>20</td>
        <td>180</td>
      </tr>
      </tbody>
    </table>    </div>
    <script type="text/javascript">
    window.onload = function(){        
            //variables
            var draggableTable = document.getElementById("draggableTable");
            //var draggingShowDiv = document.createElement("div");

            var currentMoveTr = null;

            var draggableTableData = [
            { "id": 1, "name": "产品A", "amount": 2, "price": 50 },
            { "id": 2, "name": "道具C", "amount": 1, "price": 80 },
            { "id": 3, "name": "挂件K", "amount": 1, "price": 120 },
            { "id": 4, "name": "道具C", "amount": 4, "price": 60 },
            { "id": 5, "name": "金币", "amount": 2, "price": 110 },
            { "id": 6, "name": "道具D", "amount": 5, "price": 60 },
            { "id": 7, "name": "挂件C", "amount": 1, "price": 300 },
            { "id": 8, "name": "道具C", "amount": 15, "price": 60 },
            { "id": 9, "name": "道具B", "amount": 4, "price": 300 },
            { "id": 10, "name": "加速特权H", "amount": 1, "price": 80 },
            { "id": 11, "name": "加速特权B", "amount": 1, "price": 80 },
            { "id": 12, "name": "银币", "amount": 100, "price": 1 },
            { "id": 13, "name": "道具K", "amount": 9, "price": 20 }
            ];
            gennerateDraggableTableContent();
            refreshVariablesAndBindings();
            function bindDragMouseEvents() {
                var dynamicRows = draggableTable.tBodies[0].rows;

                for (i = 0; i < dynamicRows.length; i++) {
                    dynamicRows[i].cells[0].onmousedown = function() {
                        mouseDownOnTd(this.parentNode);
                    };
                    dynamicRows[i].onmousemove = function() {
                        mouseMoveOnTr(this);
                    };
                    dynamicRows[i].onmouseup = function() {
                        mouseUpOnTr(this);
                    };
                    dynamicRows[i].onmouseout = function() {
                        mouseOutTr(this);
                    };
                    dynamicRows[i].cells[0].style.cursor = "pointer";
                }
            }
            function bindResortClickEvent() {
                var clickResortLinks = draggableTable.getElementsByTagName("a");
                for (i = 0; i < clickResortLinks.length; i++) {
                    clickResortLinks[i].onclick = function() {
                        resortByCol(this.getAttribute("dataitem"));
                    }
                }
            }
            var smallerTopWhenResort = { "id": false, "amount": true, "price": true, "total": true };
            function resortByCol(dataItemName) {
                var factor = 1;
                smallerTopWhenResort[dataItemName] = !(smallerTopWhenResort[dataItemName] && true);
                factor += (-2) * Number(smallerTopWhenResort[dataItemName]);

                switch (dataItemName) {
                    case "total":
                        resortDataByCallBack(function(a, b) {
                            return factor * ((a.amount * a.price) - (b.amount * b.price));
                        });
                        break;
                    default:
                        resortDataByCallBack(function(a, b) {
                            return factor * (a[dataItemName] - b[dataItemName]);
                        });
                        break;
                }

                gennerateDraggableTableContent();
                refreshVariablesAndBindings();
            }
            function resortDataByCallBack(callback) {
                quickResortData(0, draggableTableData.length - 1, callback);
            }
            function quickResortData(from, to, callback) {
                var i = from;
                var j = to;

                var keyPosition = from;
                var key = { "id": 1, "name": "QB", "amount": 1, "price": 1 };
                makeFronterEqualsBacker(key, draggableTableData[keyPosition]);

                while (i != j) {
                    while (callback(draggableTableData[j], key) >= 0 && j > keyPosition) {
                        j--;
                    }
                    makeFronterEqualsBacker(draggableTableData[keyPosition], draggableTableData[j]);
                    makeFronterEqualsBacker(draggableTableData[j], key);
                    keyPosition = j;
                    if (i < j) {
                        while (callback(draggableTableData[i], key) <= 0 && i < keyPosition) {
                            i++;
                        }
                        makeFronterEqualsBacker(draggableTableData[keyPosition], draggableTableData[i]);
                        makeFronterEqualsBacker(draggableTable[i], key);
                        keyPosition = i;
                    }
                }

                if (from < keyPosition - 1) { quickResortData(from, keyPosition - 1, callback); }
                if (keyPosition + 1 < to) { quickResortData(keyPosition + 1, to, callback); }
            }
            function makeFronterEqualsBacker(a, b) {
                for (i in a) {
                    //据说用 for in 的效率只有普通 for 的 1/7,但是……还是懒得写这么多代码了
                    a[i] = b[i];
                }
            }
            function mouseDownOnTd(Obj) {
                varCurrentMoveTr(Obj);
            }
            function mouseMoveOnTr(Obj) {
                if (isCurrentMoveTrExist()) {
                    turnBottomBorderRed(Obj);
                    emptySelectionStatus();
                }
            }
            function mouseUpOnTr(Obj) {
                doMoveTr(Obj);
                clearCurrentMoveTr();
            }
            function mouseOutTr(Obj) {
                turnBottomBorderGray(Obj);
            }
            function isCurrentMoveTrExist() {
                return (currentMoveTr != null);
            }
            function varCurrentMoveTr(Obj) {
                currentMoveTr = Obj;
            }
            function clearCurrentMoveTr() {
                currentMoveTr = null;
            }
            function initDraggingShowDiv() {
                draggingShowDiv.style.position = "absolute";
                draggingShowDiv.style.display = "none";
                document.body.appendChild(draggingShowDiv);
            }
            function showDraggingShowDiv() {
                draggingShowDiv.style.pixelTop = document.body.scrollTop + event.clientY + 10;
                draggingShowDiv.style.pixelLeft = document.body.scrollLeft + event.clientX + 10;
                draggingShowDiv.innerHTML = '<table style="border:solid 1px gray;"><tr>' + currentMoveTr.innerHTML + '</table></tr>';
                draggingShowDiv.style.backgroundColor = "brown";
                draggingShowDiv.style.display = "inline";
            }
            function hideDraggingShowDiv() {
                draggingShowDiv.style.display = "none";
            }
            function turnBottomBorderRed(trObj) {
                for (i = 0; i < trObj.cells.length; i++) {
                    trObj.cells[i].style.borderBottomColor = "red";
                }
            }
            function turnBottomBorderGray(trObj) {
                for (i = 0; i < trObj.cells.length; i++) {
                    trObj.cells[i].style.borderBottomColor = "gray";
                }
            }
            function emptySelectionStatus() {
                //document.selection.empty();
            }
            function doMoveTr(Obj) {
                if (isCurrentMoveTrExist()) {
                    var newTr = draggableTable.insertRow(returnTrIndex(Obj) + 1);
                    newTr.appendChild(document.createElement("th"));
                    newTr.cells[0].innerHTML = currentMoveTr.cells[0].innerHTML;
                    
                    for (i = 1; i < currentMoveTr.cells.length; i++) {
                        newTr.appendChild(document.createElement("td"));
                        newTr.cells[i].innerHTML = currentMoveTr.cells[i].innerHTML;
                    }

                    draggableTable.deleteRow(returnTrIndex(currentMoveTr));

                    bindDragMouseEvents();
                }
            }
            function gennerateDraggableTableContent() {
                var draggableTableContent = "";
                for (i = 0; i < draggableTableData.length; i ++ ) { 
                    draggableTableContent += '<tr><th>' + draggableTableData[i].id
                    + '</th><td>' + draggableTableData[i].name
                    + '</td><td>' + draggableTableData[i].amount
                    + '</td><td>' + draggableTableData[i].price
                    + '</td><td>' + (draggableTableData[i].price * draggableTableData[i].amount)
                    + '</td></tr>';
                }
                document.getElementById("draggableTableDiv").innerHTML = '<table id="draggableTable" cellspacing="0" cellpadding="0"><thead>'
                + draggableTable.tHead.innerHTML
                + '</thead><tbody>'
                + draggableTableContent
                + '</tbody></table>';
            }

            function returnTrIndex(trObj) {
                for (i = 0; i < draggableTable.rows.length; i++) {
                    if (draggableTable.rows[i] == trObj) {
                        return i;
                    }
                }
            }
            function refreshVariablesAndBindings() {
                draggableTable = document.getElementById("draggableTable");
                bindDragMouseEvents();
                bindResortClickEvent();
            }
    };        
    </script>
</body>
</html>
View Code
Nuller的主页 Nuller | 初学一级 | 园豆:115
提问于:2017-11-10 15:27
< >
分享
所有回答(1)
0

参考:https://www.cnblogs.com/landeanfen/p/4926137.html

金琥 | 园豆:2605 (老鸟四级) | 2017-11-11 13:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册