最近几天考试，没时间折腾博客，今天才考完终于有时间了，之前b站拖动排序不错我又打算"偷"过来，拖动排序这个效果不错，只不过弄了半天还是有几个bug没解决。

今天分享一个简单拖动效果，几步搞定。

代码

<!--HTML代码-->
<div class="show">
    jquery实现DIV层拖动
</div>

<!--CSS代码-->
    <style type="text/css">
        .show{
            background:#7cd2f8;
            width:100px;
            height:100px;
            text-align:center;
            position:absolute;
            z-index:1;
            left:100px;
            top:100px;
            cursor:move;
        }
      </style>

接下来用jq来设置拖动属性

自行调用JQ库

<script src="https://apps.bdimg.com/libs/jquery/1.6.4/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
        $(document).ready(function() {//文档加载
            $(".show").mousedown(function(e){//event鼠标事件
                var offset = $(this).offset();//DIV在页面的位置
                var x = e.pageX - offset.left;//获得鼠标指针离DIV元素左边界的距离
                var y = e.pageY - offset.top;//获得鼠标指针离DIV元素上边界的距离

                $(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件
                    $(".show").stop();//每一次添加绑定后都停止之前移动
                    var move_x = ev.pageX - x;//获得当前鼠标X轴方向移动的值
                    var move_y = ev.pageY - y;//获得当前鼠标Y轴方向移动的值
                    $(".show").animate({left:move_x+"px",top:move_y+"px"},0);//以动画方式移动div
                });
            });
            $(document).mouseup(function(){//当鼠标松开的时候
                $(this).unbind("mousemove");//清除绑定事件
            })
        });
</script>

之后我还在死死的研究类似wp导航条拖动排序的效果，以上效果仅仅用于单个div拖动，如果需要多个div都可以拖动的话需要获取每一个div的位置

多个div拖动的话就在div添加show类

最后的代码

$(document).ready(function() {
            var div = 0;//默认div为0的位置
            $(".show").mousedown(function(e){
                div = $(".show").index($(this));//获取show类的位置
                var offset = $(this).offset();
                var x = e.pageX - offset.left;
                var y = e.pageY - offset.top;

                $(document).bind("mousemove",function(ev){
                    $(".show").eq(div).stop();//这里就必须添加eq()来获取元素了
                    var move_x = ev.pageX - x;
                    var move_y = ev.pageY - y;
                $(".show").eq(div).animate({left:move_x+"px",top:move_y+"px"},0);//这里同样的用eq索引元素
                });
            });
            $(document).mouseup(function(){
                $(this).unbind("mousemove");
            })
        });

如有疑问欢迎在下面回复~