拖拽div移动的两种方法

最新推荐文章于 2024-06-13 15:49:37 发布

茹LYR

最新推荐文章于 2024-06-13 15:49:37 发布

阅读量3.8k

点赞数

分类专栏： JS 文章标签： Draggable 移动拖拽div

本文链接：https://blog.csdn.net/qq_43155489/article/details/100082767

版权

JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

jQuery UI - 拖动（Draggable）
在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="main" style="width: 100px;height:100px;background-color: red"></div>
</body>
<script src="../frames/jquery-1.11.1.min.js"></script>
<script src="../frames/jquery-ui.js"></script>
<script type="text/javascript">
    $('#main').draggable({
        stop : function (e) {
            console.log(e)
            //储存位置信息
        }});
</script>
</html>

更多拖动的功能可以参考jQuery UI 实例 - 拖动（Draggable）
2. 根据鼠标事件拖动div并计算在页面中的位置比例，例子如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        html{
            height: 100%;
        }
        body{
            /*height: calc(100% - 16px);*/
            margin:0;
            height: 100%;
        }
        #main{
            width: 100px;
            height:100px;
            background-color: red;
            position:absolute;
        }
    </style>
</head>
<body>
<div id="main"></div>
</body>
<script src="../frames/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    drag();
    function drag() {
        var odrag = document.getElementById("main");
        odrag.onmousedown = function (ev) {
            var oevent = ev || event;
            var distanceX = oevent.clientX - odrag.offsetLeft;
            var distanceY = oevent.clientY - odrag.offsetTop;
            var old_x=oevent.clientX;
            var old_y=oevent.clientY;
            document.onmousemove = function (ev) {
                var oevent = ev || event;
                var _x, _y;
                _x = oevent.clientX - distanceX;
                _y = oevent.clientY - distanceY;
                if (_x < 0) _x = 0;
                if (_y < 0) _y = 0;
                if (_x > document.body.clientWidth - odrag.offsetWidth) _x = document.body.clientWidth  - odrag.offsetWidth;
                if (_y > document.body.clientHeight  - odrag.offsetHeight) _y = document.body.clientHeight  - odrag.offsetHeight;
                odrag.style.left = _x + 'px';
                odrag.style.top = _y + 'px';
            };
            document.onmouseup = function (ev) {
                var oevent = ev || event;
                var _x = oevent.clientX - distanceX;
                var _y = oevent.clientY - distanceY;

                var leftindex=(_x/$("body").width()).toFixed(2);
                var topindex=(_y/$("body").height()).toFixed(2);
                //存储位置区域比列或者具体数据
                document.onmousemove = null;
                document.onmouseup = null;
            };
        }
    }

</script>
</html>

茹LYR

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
拖拽div移动的两种方法

jQuery UI - 拖动（Draggable）在任意的 DOM 元素上启用 draggable 功能。通过鼠标点击并在视区中拖动来移动 draggable 对象。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><body...
复制链接

扫一扫

专栏目录