jq div 托拉拽

Posted 2021-02-01 94lh-shuai

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jq div 托拉拽相关的知识，希望对你有一定的参考价值。

$(function () {
    $(document).mousemove(function (e) {
        if (!!this.move) {
            var posix = !document.move_target ? { ‘x‘: 0, ‘y‘: 0 } : document.move_target.posix,
                callback = document.call_down || function () {
                    $(this.move_target).css({
                        ‘top‘: e.pageY - posix.y,
                        ‘left‘: e.pageX - posix.x
                    });
                };

            callback.call(this, e, posix);
        }
    }).mouseup(function (e) {
        if (!!this.move) {
            var callback = document.call_up || function () { };
            callback.call(this, e);
            $.extend(this, {
                ‘move‘: false,//是否执行触发操作
                ‘move_target‘: null, //操作的元素对象
                ‘call_down‘: false, //mousemove的时候的回调函数，传回来的this指向document
                ‘call_up‘: false   //当鼠标弹起的时候执行的回调函数，传回来的this指向document
            });
        }
    });

    var $box = $(‘.box‘).mousedown(function (e) {
        var offset = $(this).offset();
        this.posix = { ‘x‘: e.pageX - offset.left, ‘y‘: e.pageY - offset.top };
        $.extend(document, { ‘move‘: true, ‘move_target‘: this });

    });

});

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery拖放</title>
    <script src="JScript/jquery.min.js"></script>
    <script src="JScript/test/test.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        body {
            background-color: #eee;
        }

        .box {
            width: 200px;
            height: 100px;
            cursor: move;
            position: absolute;
            top: 30px;
            left: 30px;
            background-color: #ffee00;
            border: 1px solid #CCCCCC;
            -webkit-box-shadow: 10px 10px 25px #ccc;
            -moz-box-shadow: 10px 10px 25px #ccc;
            box-shadow: 10px 10px 25px #ccc;
        }

        .main_tabletop {
            width: 100%;
            height: 20px;
            background: #ffee00;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="main_tabletop">我是可以拖动的标题</div>
    </div>
</body>
</html>

以上是关于jq div 托拉拽的主要内容，如果未能解决你的问题，请参考以下文章

Jquery 多行拖拽图片排序 jq优化

jq怎么获取绝对定位与相对定位的top值？