js实现拖拽功能

最新推荐文章于 2023-07-26 17:33:34 发布

木木木和小琳琳

最新推荐文章于 2023-07-26 17:33:34 发布

阅读量364

点赞数

文章标签： javascript css html Powered by 金山文档

本文链接：https://blog.csdn.net/qq_19820589/article/details/129341012

版权

该代码段展示了如何使用JavaScript（结合jQuery）实现一个可拖动的固定定位元素。函数dragMoveX允许用户在指定的容器内或整个文档中拖动一个元素，考虑了边界限制。关键点包括鼠标按下、移动和释放事件，以及元素的left和top位置更新。

摘要由CSDN通过智能技术生成

<div class="box no_copy">
            <span>移动盒子</span>
        </div>

html,body{
                margin:0;
                padding:0;
            }
            .box{
                position:fixed;
                width:100px;
                line-height:100px;
                text-align:center;
                white-space: nowrap;
                background: #eee;
                border:5px solid #aaa;
                cursor: move;
                box-sizing: border-box;/*必须包含边框，防止多了个边框的缝隙*/
            }
            .box>span{
                display: inline-block;
                height:100px;
            }

//container：拖动的元素
    //box；容器。是否限制在某个容器内拖动，不传代表不限制
    function dragMoveX(container,box) {
        var flag;
        var offsetX,offsetY;
        var w=$(box).width();
        var h=$(box).height();
        var boxW=$(container).width();
        var boxH=$(container).height();
        //鼠标按下
        $(document).on("mousedown", container, function (event) {
            flag = true;
            offsetX = event.offsetX;
            offsetY = event.offsetY;
        });
        //鼠标移动
        $(document).on("mousemove", function (event) {
            if (flag) {
                var moveX = event.clientX;
                var moveY = event.clientY;
                let toX=moveX-offsetX;
                let toY=moveY-offsetY;
                if(box){
                    //小于左边0
                    if(toX<0){
                        $(container).css('left','0px')
                    }else if(toX>w-boxW){
                        $(container).css('left',(w-boxW)+'px')
                    }else{
                        $(container).css('left',toX+'px')
                    }
                    
                    if(toY<0){
                        $(container).css('top','0px')
                    }else if(toY>h-boxH){
                        $(container).css('top',(h-boxH)+'px')
                    }else{
                        $(container).css('top',toY+'px')
                    }
                }else{
                    $(container).css('left',toX+'px')
                    $(container).css('top',toY+'px')
                }            
            }
        });
        //鼠标释放
        $(container).on("mouseup", function () {
            flag = false;
        });
        //鼠标释放
        $(document).on("mouseup", function () {
            flag = false;
        });
        /**
         * 注意：与 mouseout 事件不同，mouseleave 事件只有在鼠标指针离开被选元素时被触发，mouseout 事件在鼠标指针离开任意子元素时也会被触发。参见页面底部演示实例。
         * 所以：如果mouseout的子元素存在溢出，并添加了超出加滚动，那么刚进入也会触发该事件，所以这里就不能使用。
         * */
        //鼠标移出元素
        $(container).on("mouseleave", function (event) {
            if (event.pageX < 0 || event.pageX > document.body.offsetWidth) {
                flag = false;
            }         
        });
    }
     
    dragMoveX(".box",document);//document针对fixed固定定位，绝对定位用父容器