Home > Developer > JavaScript
The implementation of row drag is very simple, select a row, drag up on the line with the above exchange position, down to the following line swap position. The question is how to get the swap line. I've seen a very detailed tutorial that calculates the height of each row in the table and the y-coordinate, in other words, comparing e.pagex within [rowtop,rowbottom] intervals. But it also brings up the second question, how many lines have multiple such intervals. The solution then becomes the object of the event source, and then the parent object, if its parent object is a TR element, takes its [rowtop,rowbottom] interval .... The idea is straightforward, and there is an objective limit--you can't drag with the agent. Let's not talk about is the drag agent or drag the object, light in the process of moving the mouse to do the calculation is very large, fortunately still under the scope of IE. Is there a better way?
Man's preconceived notions, for he holds so few keys. If he had a lot of keys in his hand, he would stop and pick the door carefully. So the more familiar the native API is, the better it is to get better options. To change the idea, save the current line and its style and coordinates while dragging (MouseDown), and drag to get the element on the location of the mouse, which is to use an ingenious API to get Document.elementfrompoint (x,y). Normally, we get TD, of course, if you cram a div in it, that's div luo. Then we take the TR element and then compare the TR element saved when MouseDown is not the same element, not the same element, we do further operations. Then we're going to have to move it up and down and simply subtract. The next two lines are exchanged, using InsertBefore. Finally, when MouseUp, the style of the restore line is! Because there is no complex coordinate calculation, the entire program is surprisingly efficient!
Full Demo Code
<!doctype html>
Core code
Window.onload = function () {//binding event var addevent = Document.addeventlistener? Function (el,type,callback) {El.addeven
Tlistener (Type, callback,! 1);
}: Function (el,type,callback) {el.attachevent ("on" + Type, callback); }//Remove event var removeevent = Document.removeeventlistener?
function (el,type,callback) {El.removeeventlistener (type, callback);
}: Function (el,type,callback) {el.detachevent ("on" + Type, callback); }//exact get style var GetStyle = Document.defaultview? function (El,style) {return Document.defaultView.getComputedStyle (EL, null). GetPropertyValue (Style)}: function (EL,
Style) {style = Style.replace (/\-(\w)/g, function ($, $) {return $1.touppercase ();
});
return El.currentstyle[style];
var Dragmanager = {clienty:0, draging:function (e) {//mousemove drag row var dragobj = dragmanager.dragobj;
if (dragobj) {e = e | | | event;//clears the selection if (window.getselection) {//w3c window.getselection (). Removeallranges (); }else if (document.selectiON) {document.selection.empty ();//ie} var y = E.clienty;
var down = y > dragmanager.clienty;//moves the var tr = document.elementfrompoint (e.clientx,e.clienty) downward;
if (tr && tr.nodename = "TD") {tr = Tr.parentnode Dragmanager.clienty = y;
if (dragobj!== tr) {Tr.parentNode.insertBefore (dragobj, down tr.nextSibling:tr));
}
};
}, Dragstart:function (e) {e = e | | | event; var target = E.target | |
E.srcelement;
if (Target.nodename = = "TD") {target = Target.parentnode;
Dragmanager.dragobj = target;
if (!target.getattribute ("Data-background")) {var background = GetStyle (target, "Background-color");
Target.setattribute ("Data-background", background)}//displayed as removable state Target.style.backgroundColor = "#ccc";
Target.style.cursor = "Move";
Dragmanager.clienty = E.clienty;
Addevent (document, "MouseMove", dragmanager.draging);
Addevent (document, "MouseUp", dragmanager.dragend);}, Dragend:function (e) {var dragobj = Dragmanager.dragobj if (dragobj) {e = e | | event; var target = E.target | |
E.srcelement;
if (Target.nodename = = "TD") {target = Target.parentnode;
DragObj.style.backgroundColor = Dragobj.getattribute ("Data-background");
DragObj.style.cursor = "Default";
Dragmanager.dragobj = null;
Removeevent (document, "MouseMove", dragmanager.draging);
Removeevent (document, "MouseUp", dragmanager.dragend);
}}, Main:function (EL) {addevent (El, MouseDown, Dragmanager.dragstart);
} var el = document.getElementById ("table");
Dragmanager.main (EL); }
Implement code two
<! DOCTYPE html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
