嵌套多层的复杂拖动效果

最新推荐文章于 2024-05-10 09:49:44 发布

丰云

最新推荐文章于 2024-05-10 09:49:44 发布

阅读量3.3k

点赞数

分类专栏：前端应用文章标签： div+css 多层嵌套拖动 javascript

本文链接：https://blog.csdn.net/foren_whb/article/details/50317395

版权

前端应用专栏收录该内容

61 篇文章 0 订阅

订阅专栏

今天因为项目需要，多方查证后，实现了一个最简单的嵌套多层的复杂拖动效果，另外在后面附上了jquery-ui推荐的拖动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Draggable - Constrain movement</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            border: 1px solid #ccc;
            overflow: hidden;
            margin: auto;
        }
        .middle {
            width: 200px;
            height: 200px;
            margin: auto;
            overflow: hidden;
            border: 1px solid blue;
        }
        .inside {
            width: 50px;
            height: 50px;
            margin: auto;
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div class="outer">
        <div class="middle">
            <p class="inside"></p>
        </div>
    </div> 
</body>
</html>
<script type="text/javascript">
    $(function () {
        var move = {}, curr;
        move.x = move.y = move.mousekey = 0;
        $(document).on("mousedown", function (e) {            
            curr = e.originalEvent.srcElement;//获取当前选中的标签对象
            e.stopPropagation();              //阻止事件冒泡（事件穿透）
            move.mousekey = true;
            $(curr).css("cursor", "move");
            $(curr).css('position', 'relative');
            $(curr).parent().css('position', 'relative');
            var left = $(curr).css("left");
            var top = $(curr).css("top");
            move.x = e.pageX - parseInt(left == 'auto' ? 0 : left);
            move.y = e.pageY - parseInt(top == 'auto' ? 0 : top);
        }).on('mouseout', function () {
            move.mousekey = false;
            $(curr).css("cursor", "default");
        }).on('mousemove', function (e) {
            if (move.mousekey) {
                $(curr).css({ top: e.pageY - move.y, left: e.pageX - move.x });
            }
        }).on('mouseup', function () {
            move.mousekey = false;
            $(curr).css("cursor", "default");
        });
    });
</script>

jquery-ui推荐的拖动方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jQuery UI Draggable - Constrain movement</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <style>
        .outer {
            width: 800px;
            height: 600px;
            border: 1px solid #ccc;
            overflow: hidden;
            margin: auto;
        }

        .middle {
            width: 200px;
            height: 200px;
            margin: auto;
            overflow: hidden;
            border: 1px solid blue;
        }

        .inside {
            width: 50px;
            height: 50px;
            margin: auto;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="middle ui-widget-content">
            <p class="inside ui-widget-content"></p>
        </div>
    </div> 
</body>
</html>
<script type="text/javascript">
    $(function () {
        $(".middle").draggable();
        $(".inside").draggable();
    });
</script>