1. Function: Drag an element from the drop-down menu and insert it into the app list on the page
and implement the app to move backward the position of an element;
2. Implementation ideas:
01. Traverse the drop-down menu to add a drag and drop method to achieve the position movement function;
02. Iterate through the app list to save the app location as an array;
03. Drag elements and the current app to do collision detection;
04. If the mouse is inside the app, after adding the drag element to the current app, the position is set to the current value of I;
The reference code is as follows:
<!doctype html>#tp {height:50px;width:310px;margin:0 auto;list-Style:none;} . tps{height:40px;width:60px;float: Left;text-align:center;background: #e4393c; line-height:40px;margin-right:1px; }. Container{height:500px;width:600px;background: #ccc; margin:0Auto;} . Container Ul{list-style:none;height:300px;width:500px;margin:0Auto;} . inner{height:40px;width:59px;float: Left;text-align:center;background: #666; line-height:40px;margin-right:1px; Margin-top:1px; }. Green{background:green;} </style> <script src= "jquery.min.js" type= "Text/javascript" ></script> $(function(){ functionPointer (x, y) { This. x =x; This. y =y; } functionPosition (left,top) { This. left =Left ; This. top =top; } $('. TPs '). each (function(i) { This. init =function(){ $( This). attr (' index ', i); This. drag (); } This. Moveback =function(callback) {$ ( This). Animate ({left: This. Pos.left, Top: This. Pos.top},500) } This. Check =function(){ varCurrentItem = This; varClision =NULL; varPosition = []; $('. Inner '). each (function() {const {top, left}= $( This). offset (); Position.push ({top:top, left:left}); $( This). attr (' index ', i); //Index.push ($ (this). index ()); if(Currentitem.pointer.x >$ ( This). Offset (). Left &&Currentitem.pointer.y> $ ( This). Offset (). Top &&(currentitem.pointer.x< $ ( This). Offset (). Left + $ ( This). Width ()) &&(Currentitem.pointer.y< $ ( This). Offset (). Top + $ ( This). Height ())) { $( This). After ($ (currentitem)); } }) //Console.log (StartIndex) //Console.log (EndIndex)console.log (position)} This. Add =function(){ } This. Drag =function(){ varOldposition =NewPosition (); varOldpointer =NewPointer (); varCurrentItem =NULL; varIsdrag =false ; $( This). MouseDown (function(e) {e.preventdefault (); Oldposition.left= $( This). Offset (). Left; Oldposition.top= $( This). Offset (). Top; Oldpointer.x=E.clientx; Oldpointer.y=E.clienty; CurrentItem= This; Isdrag=true; }) $ (document). MouseMove (function(e) {varCurrentpointer =NewPointer (E.clientx,e.clienty); if(!isdrag)return false; $ (CurrentItem). CSS (' Opacity ', 0.7); varleft = currentpointer.x-oldpointer.x +Oldposition.left; vartop = Currentpointer.y-oldpointer.y +Oldposition.top; $ (CurrentItem). css ({position:' Absolute ', Left:left, top:top}); Currentitem.pointer=Currentpointer; }) $ (document). MouseUp (function(){ if(!isdrag)return false; Isdrag=false; $ (CurrentItem). css ({position:‘‘, }); /** Currentitem.moveback (function () {$ (this). CSS ({ "Opacity": "1", "Z-index": 0}); }); **/Currentitem.check (); }) } This. Init (); }) }) </script> </div> </body>For reference only .....
Drag an element from the drop-down menu and insert it into the app list on the page
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
