基本拖拽效果,使用 mousedown , mousemove , mouseup实现

1.一个div拖拽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本拖拽效果</title>
    <script src="../../common/jquery-1.8.3.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .drag{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            top:40px;
            left:50px;
        }
    </style>
</head>
<body>
    <div class="drag"></div>
</body>
<script>
    $(function(){
            var _move = false;
            var _x,_y;
            $(".drag").mousedown(function(e){
                console.log(e.pageX, e.pageY);
                _move = true;
                _x = e.pageX - parseInt($(".drag").css("left"));
                _y = e.pageY - parseInt($(".drag").css("top"));
                $(".drag").fadeTo(20,0.5);
            })

            $(document).mousemove(function(e){
                if(_move){
                    var x = e.pageX - _x;
                    var y = e.pageY - _y;
                    $(".drag").css({"left":x,"top":y});
                }
            }).mouseup(function(){
                _move = false;
                $(".drag").fadeTo("fast",1);
            })



    })
</script>
</html>

　　2.多个div单独进行拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本拖拽效果</title>
    <script src="../../common/jquery-1.8.3.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .drag{
            width:100px;
            height:100px;
            background-color:red;
            position:absolute;
            top:40px;
            left:50px;
        }
    </style>
</head>
<body>
    <div class="drag"></div>
    <div class="drag"></div>
</body>
<script>
    $(function(){

        $(".drag").each(function(){
            var _move = false;
            var _x,_y;
            var _this = $(this);
            $(this).mousedown(function(e){
                console.log(e.pageX, e.pageY);
                _move = true;
                _x = e.pageX - parseInt(_this.css("left"));
                _y = e.pageY - parseInt(_this.css("top"));
                _this.fadeTo(20,0.5);
            })

            $(document).mousemove(function(e){
                if(_move){
                    var x = e.pageX - _x;
                    var y = e.pageY - _y;
                    _this.css({"left":x,"top":y});
                }
            }).mouseup(function(){
                _move = false;
                _this.fadeTo("fast",1);
            })
        })



    })
</script>
</html>

　　

posted @ 2018-11-17 22:34  董七  阅读(2154)  评论(0)    收藏  举报