如何在并列的LI 中插入新的LI ，并且实现原LI 位置向后移动一个宽度？

Question

公司让写一个仿手机APP 拖拽添加的功能，我只写了拖拽，原本以为只要再写一个碰撞检测把拖动的div放到连个图标中间就行了，但是发现拖动div最后的位置，APP图标的位置不会处理？

 drag_append:function(){
        var self = this;
        var appender = null;
        $('.lis').on('mousedown',function(event){
            var e = window.event||arguments[0];
            event.preventDefault();
            var niu = $(this).clone();
            var  a = self.pic_change(niu.html());
            appender = $(a);
            var cur_Pos = $(this).offset();
            $('#for_drag').append(appender);//拖动的div
            $('#for_drag').css({'display':'block','top':cur_Pos.top,'left':cur_Pos.left,'position':'absolute'});
            $('#for_drag').css({'width':'140px','height':'132px','z-index':'51'});
            $('#for_drag').trigger(event);
            $('#for_drag').css('z-index','51');
            var posX = $('#for_drag').offset().left;
            var posY = $('#for_drag').offset().top;
            $(document).bind('mousemove',function(){
                var e  = window.event||arguments[0];
                event.preventDefault();
                e.stopPropagation();
                var Nposx = e.clientX - posX;
                var Nposy = e.clientY - posY;
                var for_drag_inner = $('#for_drag').html();

                $('#for_drag').css({'top':(Nposy+'px'),'left':(Nposx+'px')});
                var t1 = $('#for_drag').offset().top;
                var b1 = $('#for_drag').height()+t1;
                var l1 = $('#for_drag').offset().left;
                var r1 = $('#for_drag').width() + l1;


                $('.Message').each(function(){//为APP添加事件做碰撞检测
                    var t2 = $(this).offset().top;
                    var b2 = t2 + $(this).height();
                    var l2 = $(this).offset().left;
                    var r2 = l2 + $(this).width();
                    var width_half = $(this).width()/2;
                    var height_half = $(this).height()/2;

                    if(r1>=l2+width_half&&r1<=r2+width_half&&b1>=t2+height_half&&b1<=b2+height_half){
                       console.log('相交')
                        $(this).css('background','#e4393c')
                        
                    }else{
                        console.log('bu相交')
                        $(this).css('background','')
                    }
                })


            });
            $(document).bind('mouseup',function(){
                event.preventDefault();
               
                $(document).unbind('mousemove');
                $(document).unbind('mouseup')
            })

        });

各位大神有没有这方面的资源推荐一个，我也学习学习。。
不胜感激，，，，

Answer 1

HTML5已经支持了HTML5drag&drop
有一个比较好的轮子Sortable