html5+table行拖动,如何实现table多行拖动？

原生JS实现拖动表格行、及表格列自动排序的方法(快速排序)

序号名称数量单价(点卡)总计(点卡)

1农场化肥A2501002飞车道具C180803空间装扮K11201204农场狗粮C4602405音速种子21102206农场化肥D5603007AVA装扮C13003008三国道具C15609009DNF道具B4300120010农场化肥H1808011农场化肥B1808012Q宠元宝100110013三国道具K920180

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].οnmοusemοve=function() {

mouseMoveOnTr(this);

};

dynamicRows[i].οnmοuseup=function() {

mouseUpOnTr(this);

};

dynamicRows[i].οnmοuseοut=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].οnclick=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

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 ina) {//据说用 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= '

';

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+= '

' +draggableTableData[i].id+ '' +draggableTableData[i].name+ '' +draggableTableData[i].amount+ '' +draggableTableData[i].price+ '' + (draggableTableData[i].price *draggableTableData[i].amount)+ '';

}

document.getElementById("draggableTableDiv").innerHTML = '

+draggableTable.tHead.innerHTML+ '

'

+draggableTableContent+ '

';

}

function returnTrIndex(trObj) {for (i = 0; i < draggableTable.rows.length; i++) {if (draggableTable.rows[i] ==trObj) {returni;

}

}

}

function refreshVariablesAndBindings() {

draggableTable= document.getElementById("draggableTable");

bindDragMouseEvents();

bindResortClickEvent();

}

};