jq div 托拉拽

最新推荐文章于 2022-09-06 11:29:57 发布

baiou1915

最新推荐文章于 2022-09-06 11:29:57 发布

阅读量240

点赞数

文章标签： php javascript ViewUI

原文链接：http://www.cnblogs.com/94LH-shuai/p/10234758.html

版权

$(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>

转载于:https://www.cnblogs.com/94LH-shuai/p/10234758.html

baiou1915

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq div 托拉拽

$(function () { $(document).mousemove(function (e) { if (!!this.move) { var posix = !document.move_target ? { 'x': 0, 'y': 0 } : document.move_target.posix, ...
复制链接

扫一扫