js实现拖拽功能

 <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固定定位，绝对定位用父容器