如何实现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>
所有回答(1)
0
参考：https://www.cnblogs.com/landeanfen/p/4926137.html
