纵向拖动排序

jQuery 前端 技术

JavaScript

2017-06-23 19:17:16

228

作者:黑夜男神

html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>纵向拖拽</title>
    <script type="text/javascript" src="http://www.xipwang.cn/js/jquery.min.js"></script>
    <script type="text/javascript" src="drageOrderList.js"></script>
</head>
<style type="text/css">
*{
    margin:0;
    padding:0;
}
#dargorder{
    width:300px;
    margin: 0 auto;
    background: #cfe;
    height: auto;
}
#dargorder .darg-div{
    width:300px;    
    margin:10px 0px;
    background:#333;
    cursor: move;
    color: #fff;

}

.temp_div{
    width:300px;
    height: 50px;
    margin:10px 0px;
    background:#fcc;
    border:1px solid #f00;
}
.show{
    border: 1px solid #e23;
}
body{
   -moz-user-select: none; /*火狐*/
   -webkit-user-select: none;  /*webkit浏览器*/
   -ms-user-select: none;   /*IE10*/
   -khtml-user-select: none; /*早期浏览器*/
   user-select: none;
}

</style>
<body>

    <div id="dargorder">
        <div class="darg-div">
            <img src="1.jpg" width="300" ondragstart="return false;" title="1">
        </div>
        <div class="darg-div">
            <img src="2.jpg" width="300" ondragstart="return false;"  title="2">
        </div>
        <div class="darg-div">
            <img src="2.jpg" width="300" ondragstart="return false;"  title="3">
        </div>
        <div class="darg-div">
            <img src="1.jpg" width="300" ondragstart="return false;"  title="4">
        </div>
    </div>

</body>
<script type="text/javascript">
;(function($) {
    function DragOrderListor(opts) {
        $_d = this;
        $_d.start = {//鼠标x,y起始坐标;
            x: 0,
            y: 0
        }; 
        $_d.thisDarg = null; //拖拽对象;
        $_d.tempDiv = null; //临时对象;
        $_d.flag = false; //拖拽状态;
        $_d.jq = opts; //JQ对象
        $_d.init();
    }
    DragOrderListor.prototype = {
        init: function() {
            this.startDown(); //鼠标按下
            this.drageMove(); //鼠标移动
            this.drageUp(); //鼠标抬起
        },
        startDown: function() {
            $d = this;
            $($d.jq).on("mousedown", ".darg-div", function(e) {
                var e = e || event;
                $_d.flag = true; //开启拖拽状态
                $_d.thisDarg = $(this); //获取当前拖得对象;
                var initOffsetY = $_d.thisDarg.offset().top; //获取当前对象距离top偏移量
                var initOffsetX = $_d.thisDarg.offset().left; //获取当前对象距离left偏移量    
                $_d.start.y = e.pageY - initOffsetY; //鼠标实际Y轴距离
                $_d.start.x = e.pageX - initOffsetX; //鼠标实际X轴距离
                //设置当前拖动状态
                $_d.thisDarg.css({
                    position: "absolute",
                    opacTity: "0.8",
                    top: initOffsetY,
                    left: initOffsetX,
                    zIndex: 1
                });
                // 创建临时Div 插入当前拖动对象之前
                $("<div class='temp_div'></div>").insertBefore($_d.thisDarg);
                $d.tempDiv = $(".temp_div");
            });
        },
        drageMove: function() {
            var $d = this;
            $(document).on('mousemove', function(e) {
                //判断当前拖动状态
                if ($d.flag) {
                    var e = e || event; //获取event事件对象
                    var mouseY = e.pageY - $d.start.y; //鼠标实际移动Y轴距离
                    var mouseX = e.pageX - $d.start.x; //鼠标实际移动X轴距离
                    //拖动对象跟随鼠标移动
                    $d.thisDarg.css({
                        top: mouseY,
                        left: mouseX
                    });
                    $d.thisDarg.addClass('show');
                    //获取临时Div距离顶部偏移量 
                    var tempDivTop = $d.tempDiv.offset().top - ($d.tempDiv.height()) / 2;
                    var tempDivBottom = $d.tempDiv.offset().top + ($d.tempDiv.height()) / 2;

                    //判断向上拖动的div的top值是否小于临时div距离顶部的偏移量,将临时div插入到上一个div之前
                    if (mouseY < tempDivTop) {
                        $d.tempDiv.insertBefore($d.tempDiv.prev());
                    }
                    //判断向下拖动的div的top值是否小于临时div距离顶部的偏移量,将临时div插入到下一个div之后
                    if (mouseY > tempDivBottom) {
                        $d.tempDiv.insertAfter($d.tempDiv.next());
                    }
                }
            });
        },
        drageUp: function() {
            $(document).on('mouseup', function(e) {
                $d.flag = false; //关闭拖动状态;
                //当鼠标抬起的时候将当前拖动的对象插入临时对象之前;                
                    if($d.tempDiv){
                         try{
                            $d.thisDarg.removeClass('show');
                            $d.thisDarg.css({
                            position: "inherit"
                            });
                            $d.thisDarg.insertBefore($d.tempDiv);
                            //将临时div移除
                            $d.tempDiv.remove();
                            $d.tempDiv = null;
                            $_d.thisDarg = null;                    
                         }catch(err){
                            alert(err.description);

                        }
                    }

            });
        }
    };
    $.fn.dragOrderListor = function() {
        new DragOrderListor(this);
    };


})(jQuery);
$(function(){
    $("#dargorder").dragOrderListor();

});
</script>
</html>

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号