js原生拖拽,h5拖拽,jq拖拽

Posted on | In | | 次阅读

js原生拖拽

基本思路如下，拖拽状态 = 0鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态 = 0
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .box {
        position: absolute;
        width: 100px;
        height: 100px;
        background: red;
        cursor: move;
        top: 0;
        left: 0;
        border-radius: 50%;
    }
</style>

<body>
    <div class="box" id="drag"></div>
    <script>
        window.onload = function () {
            var drag = document.getElementById('drag');
            // //点击某物体时，用drag对象即可，move和up是全局区域，
            // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)  
            drag.onmousedown = function (event) {
                var event = event || window.event; //兼容IE浏览器
                //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
                var diffX = event.clientX - drag.offsetLeft;
                var diffY = event.clientY - drag.offsetTop;
                if (typeof drag.setCapture !== 'undefined') {
                    drag.setCapture();
                }
                document.onmousemove = function (event) {
                    var event = event || window.event;
                    var moveX = event.clientX - diffX;
                    var moveY = event.clientY - diffY;
                    if (moveX < 0) {
                        moveX = 0
                    } else if (moveX > window.innerWidth - drag.offsetWidth) {
                        moveX = window.innerWidth - drag.offsetWidth
                    }
                    if (moveY < 0) {
                        moveY = 0
                    } else if (moveY > window.innerHeight - drag.offsetHeight) {
                        moveY = window.innerHeight - drag.offsetHeight
                    }
                    drag.style.left = moveX + 'px';
                    drag.style.top = moveY + 'px'
                }
                document.onmouseup = function (event) {
                    this.onmousemove = null;
                    this.onmouseup = null;
                    //修复低版本ie bug  
                    if (typeof drag.releaseCapture != 'undefined') {
                        drag.releaseCapture();
                    }
                }
            }
        }
    </script>
</body>

</html>

h5拖拽

参考： https://www.cnblogs.com/lhl66/p/8867697.html
draggable 属性规定元素是否可拖动（HTML5 新增）
语法：
true //规定元素是可拖动的。
false //规定元素是不可拖动的。
auto //使用浏览器的默认特性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html>

<head>
    <style type="text/css">
        #div1 {
            width: 300px;
            height: 160px;
            padding: 10px;
            border: 1px solid #aaaaaa;
        }
    </style>
    <script type="text/javascript">
        //放到何处 - ondragover
        function allowDrop(ev) {
            ev.preventDefault(); //drop事件的默认行为是以链接形式打开
        }
        //拖动什么 - ondragstart 和 setData()
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id); //dataTransfer.setData() 方法设置被拖数据的数据类型和值
        }
        //进行放置 - ondrop
        function drop(ev) {
            ev.preventDefault();
            var data = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(data));
        }
    </script>
</head>

<body>
    <p>请把下面的图片拖拽到上面的矩形里面</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br />
    <img id="drag1" src="https://ss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=1402111932,1875120122&fm=202&mola=new&crop=v1"
        draggable="true" ondragstart="drag(event)" />
</body>

</html>

jquery横向滑动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js" ></script>
    <script>
        //    jq拖拽横向滑动
    $('.box').on({
            mousedown:function(e){
                var el = $(this);
                var os = el.offset();
                dx = e.pageX - os.left;
                $(document).on('mousemove.drag',function(e){
                    el.offset({
                        left: e.pageX - dx
                    })
                }).on('mouseup',function(e){
                    $(document).off('mousemove.drag');
                })
            }
    })
    </script>
</body>
</html>

jquery自由滑动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: black;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
    <script>
        //    jq拖拽自由拖动
        $(".box").on({
            mousedown: function (e) {
                var el = $(this);
                var os = el.offset();
                dx = e.pageX - os.left, dy = e.pageY - os.top;
                $(document).on('mousemove.drag', function (e) {
                    el.offset({
                        top: e.pageY - dy,
                        left: e.pageX - dx
                    });
                }).on('mouseup', function (e) {
                    $(document).off('mousemove.drag');
                })
            },
        })
    </script>
</body>

</html>
-------------本文结束感谢您的阅读-------------