从下拉菜单拖拽一个元素出来，插入到页面中的app 列表中

1，实现功能：从下拉菜单拖拽一个元素出来，插入到页面中的app 列表中

并实现app向后移动一个元素的位置；

2.实现思路：

01.遍历下拉菜单，添加拖拽方法，实现位置移动功能；

02.遍历app列表，将app位置存为数组，进行循环；

03.拖拽元素与当前app做碰撞检测；

04.如果鼠标在app内部，则将拖拽元素添加到当前app之后，位置设置为当前 i 的值；

参考代码如下：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
    #tp{height:50px;310px;margin：0 auto;list-style:none;}
    .tps{height:40px;60px;float:left;text-align:center;background:#e4393c;line-height:40px;margin-right:1px;    
    }
    .container{height:500px;600px;background:#ccc;margin:0 auto;}
    .container ul{list-style:none;height:300px;500px;margin:0 auto;}
    .inner{height:40px;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>
 </head>
 <body>
  <ul id="tp">
    <li class="tps">关于我</li>
    <li class="tps">你好</li>
    <li class="tps">信息</li>
    <li class="tps">服务</li>
    <li class="tps">假期</li>
  </ul>

  <div class="container">
    <ul>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
        <li class="inner"></li>
    </ul>
 </div>
    <script>
    $(function(){
        function Pointer(x,y){
            this.x = x;
            this.y = y;
        }
        function Position(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(){
                var currentItem  =  this;
                var clision = null;
            
                var position = [];
                
                $('.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(){
                var oldposition = new Position();
                var oldpointer = new Pointer();
                var currentItem  = null;
                var isDrag = 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){
                    var currentpointer = new Pointer(e.clientX,e.clientY);
                    if(!isDrag) return false;
                    $(currentItem).css('opacity',0.7);
                    var left = currentpointer.x - oldpointer.x + oldposition.left;
                    var top  = 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>
</html>

仅作参考。。。。。

从下拉菜单拖拽一个元素 出来，插入到页面中的app 列表中

从下拉菜单拖拽一个元素出来，插入到页面中的app 列表中