JavaScript writes a list of draggable sorts

I often try to write a list that can be dragged for custom sorting, may not write well, welcome to provide advice.

My idea is to put all the items in the list in a parcel layer, set the parcel layer as relative positioning, each time you click on an item, the item is removed from the document and a copy is added back to the end of the document, and by setting the absolute positioning to make it appear in the same position, and the item that is behind it automatically fills in the empty space When the mouse is released, it calculates the current position in the list by the position of the mouse, and then inserts the cloned item before the item.

Full Code: Demo

Css:

#main{width:500px;margin:0;padding:0;background:Blue;position:relative; }div.list{Height:50px;text-align:Center;Margin-top:3px;background:LightBlue; }Div.list:first-child{Margin-top:0; }Div.drag{position:Absolute;width:500px;background:Red;text-align:Center;Height:50px;Opacity:0.5; }

The outermost layer of the Style section main needs to set padding to 0 and set it to relative positioning, if necessary padding can be wrapped outside main.

Html:

    <DivID= "Main">        <Divclass= "List">1</Div>        <Divclass= "List">2</Div>        <Divclass= "List">3</Div>        <Divclass= "List">4</Div>        <Divclass= "List">5</Div>    </Div>

Js:

        varDiv=g (' #main ');//Get wrap Layer element        varMtop=div.offsettop;//the position of the wrapping layer from the top        varflag=0;//to control whether it can be dragged        vardrag={//save some information about a cloned elementCurrNULL, Ttop:0, Num:0        }; Div.addeventlistener (' MouseDown ',function(e) {//Add MouseDown eventflag=1;//when the mouse is pressed, it is indicated as a draggable state            varCurr=E.target; varTop= (curr.offsettop-mtop) + ' px ';//the top value of the current element relative to the parent element            varY=e.pagey-curr.offsettop;//The position of the mouse in the current itemDrag.ttop=y;//Record y valuesconsole.log (top)varNewdiv=div.removechild (Curr);//clones the current item and removesNewdiv.setattribute (' class ', ' drag ');//Add StyleNewdiv.style.top=top;//Place position at current positionNewdiv.style.left=0;            Div.appendchild (NEWDIV); Drag.curr=Curr;                }); Div.addeventlistener (' MouseMove ',function(e) {//use mouse to move events to simulate drag and drop            if(!flag) {//If the flag=0 is not dragged                return false; }Else{                                varCurr=g ('. drag ') [0];//get cloned ObjectCurr.style.top= (e.pagey-drag.ttop-mtop) + ' px ';//Change the location of a cloned object by mouse position                varRatio = (e.pagey-drag.ttop-mtop)%53;//The height of each item is fixed, so the height of each item can be determined by the current height to be inserted before that item                if(ratio<=5) {//setting deviationscurr.bordertop= ' 2px solid green ';//Add a hintDrag.num=math.floor ((e.pagey-drag.ttop-mtop)/53);Console.log (Drag.num)}}        }); Div.addeventlistener (' MouseUp ',function(e) {//drag and drop endDiv.insertbefore (Drag.curr,div.children[drag.num]);//InsertDrag.curr.setAttribute (' class ', ' list ');//Add Styledrag.curr.style=NULL;//Clear StyleFlag=0; })        functionG (str) {//for easy access to element objects            if(/^#.+/. Test (str)) {STR=str.slice (1); returndocument.getElementById (str); }Else if(/^\.. +/. Test (str)) {STR=str.slice (1); returndocument.getelementsbyclassname (str); }Else {                returndocument.getelementsbytagname (str); }        }

JavaScript writes a list of draggable sorts