实现移动端（PC端）div拖拽自动排列功能

1、进入画面后按下F12手机或iPad都可以拖拽拖拽完成后会自动排列。!DOCTYPEhtmlhtmllangenheadmetacharsetutf-8metahttp-equivX-UA-CompatiblecontentIEedgemetanameviewportcontentwidthdevice-width, initial-scale1, shrink-to-fitnotitle123/titlestyle*{padding:0;margin:0;}html,body{width:100%;height:100%;}.wrap{position:relative;width:600px;height:350px;margin:100pxauto;border:solid1pxwhite;}.wrapdiv{position:absolute;z-index:1;width:100px;height:100px;text-align:center;align-items:center;transition:all.5s;}.red{background-color:tomato;color:white;border-radius:15px;}.red-child{border:solid1pxtomato;}.children{color:grey;}.green{background-color:yellowgreen;color:white;border-radius:15px;}.green-child{border:solid1pxyellowgreen;background-origin:padding-box;}.blue{background-color:rgb(29,167,231);color:white;border-radius:15px;}.blue-child{border:solid1pxrgb(29,167,231);}/style/headbodyclassapp header-fixed sidebar-fixed sidebar-hidden aside-menu-fixed aside-menu-hiddenstyletext-align:centerdivclasswrapidelWrapdivclassred保安月次/divdivclasschildren red-child自分/divdivclasschildren red-child月次/divdivclasschildren red-child自分/divdivclasschildren red-child月次/divdivclassgreen保安年次/divdivclasschildren green-child年次/divdivclasschildren green-child年次入力/divdivclassblue他/divdivclasschildren blue-child工程/divdivclasschildren blue-child保安台客/div/div/body/htmlscriptletindex0;letelArrdocument.getElementById(elWrap).children;letelList[];//构造一个数组for(leti0;ielArr.length;i){elList.push({el:elArr[i],sort:i,index:i});elList[i].onclickaddEvent(elList[i]);}moveItem(elList);functionaddEvent(item){item.el.addEventListener(touchstart,(e){item.el.style.zIndex2;item.el.style.transitionall 0s;vartouch;if(event.touches){touche.touches[0];}else{touche;}letstartXtouch.pageX,startYtouch.pageY,leftitem.el.offsetLeft,topitem.el.offsetTop;letmoveFun(e){vartouch;if(event.touches){touche.touches[0];}else{touche;}letXtouch.pageX-startXleft;letYtouch.pageY-startYtop;item.el.style.left${X}px;item.el.style.top${Y}px;reRange(item,X,Y);};document.addEventListener(touchmove,moveFun);item.el.addEventListener(touchend,(){document.removeEventListener(touchmove,moveFun);item.el.style.zIndex1;item.el.style.transitionall .5s;moveItem(elList);});});}functionreRange(item,x,y){letmoveIndexMath.round(x/125)Math.round(y/125)*5;moveIndexmoveIndex0?0:moveIndex;moveIndexmoveIndexelList.length-1?elList.length-1:moveIndex;if(moveIndex!index){indexmoveIndex;letcurrentSortitem.sort;for(leti0;ielList.length;i){if(currentSortmoveIndex){if(elList[i].sortcurrentSortelList[i].sortmoveIndex){elList[i].sort-1;};}elseif(currentSortmoveIndex){if(elList[i].sortcurrentSortelList[i].sortmoveIndex){elList[i].sort1;};}};elList[item.index].sortmoveIndex;moveItem(elList);}}//排列functionmoveItem(elList){for(leti0;ielList.length;i){elList[i].el.style.leftelList[i].sort%5*125px;elList[i].el.style.topparseInt(elList[i].sort/5)*125px;}}/script2、PC端的话把js代码中的touchstart、touchmove、touchend分别替换成mousedown、mousemove、mouseup即可。