js to progress bar

最新推荐文章于 2024-03-12 19:30:34 发布

一朵红杏

最新推荐文章于 2024-03-12 19:30:34 发布

阅读量493

点赞数

分类专栏： front end 文章标签： css3 拖动进度 progressbar

本文链接：https://blog.csdn.net/java_goodstudy/article/details/52786298

版权

front end 专栏收录该内容

56 篇文章

订阅专栏

本文介绍了一种基于jQuery的拖拽效果实现方案，通过简单的HTML结构配合CSS样式和JavaScript交互，实现了可在限定区域内自由拖动的点状元素。此方案适用于需要用户手动调整参数或进行简单互动的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img src="https://img-blog.csdn.net/20161011111950302?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" /><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>drag</title>
    <style>
        .drag {
            margin: 0 auto;
            width: 300px;
            position: relative;
            border-radius: 5px;
            background: yellowgreen;
            height: 10px;
        }

        .point {
            display: block;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background: orangered;
            position: absolute;
            left: -10px;
            top: -5px;
        }
    </style>
</head>
<body>
<div class="drag" id="wrap_drag">
    <span class="point" id="drag_point"></span>
</div>

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script>
    $(function () {
        var dragPoint = $('#drag_point');
        var dragWrap = $('#wrap_drag');
        var wrap_x = dragWrap.offset().left;
        var dragPointWidth = parseInt(dragPoint.css('width')) / 2;
        var wrapWidth = parseInt($('#wrap_drag').css('width'));
        var maxOffset = wrapWidth - dragPointWidth;
        var minOffset = -dragPointWidth;
        dragPoint.bind('mousedown', function (event) {
            /* get drag ele x-y */
            var offset_x = $(this)[0].offsetLeft;//x坐标
            console.log(offset_x + 'offsetx的位置')
            var offset_y = $(this)[0].offsetTop;//y坐标
            /* get current x-y */
            var mouse_x = event.pageX;
            var mouse_y = event.pageY;
            /* 由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素 */
            $(document).bind("mousemove", function (ev) {
                var _x = ev.pageX - mouse_x;
                var _y = ev.pageY - mouse_y;
                var now_x = (offset_x + _x ) + "px";
                var pos = parseInt(now_x);
                if (pos > maxOffset) {
                    pos = maxOffset;
                }
                if (pos < minOffset) {
                    pos = minOffset;
                }
                console.info('打印point滑动球left值' + pos);
                dragPoint.css({
                    //  top:now_y,
                    left: pos + 'px'
                });
            });
        });
        $(document).bind("mouseup", function () {
            $(this).unbind("mousemove");
        });
    });
</script>
</body>
</html>