js：在浏览器内拖动元素

最新推荐文章于 2023-09-01 17:30:53 发布

蜗牛后端

最新推荐文章于 2023-09-01 17:30:53 发布

阅读量301

点赞数

分类专栏：代码集

本文链接：https://blog.csdn.net/weixin_39717076/article/details/80491439

版权

代码集专栏收录该内容

51 篇文章 1 订阅

订阅专栏

HTML部分：

<div id="list-window">
    <button id="fixButton" class="layui-btn layui-btn-danger">
        <i class="layui-icon">&#xe603;</i>
    </button>
    <div id="fixR">
        <div id="bar"><p>点击拖动该窗口</p></div>
        <div id="view"></div>
    </div>
</div>

CSS：

#fixR{
    position: absolute;
    right: 0px;
    overflow-y: auto;
    height: 300px;
    top: -2px;
    width: 605px;
    background-color: #e5e5e5;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    z-index: 10000;
}
#list-window {
    width:38px;
    height:38px;
    position: fixed;
    top:50%;
    right: 0px;
    z-index: 200;
}
#bar{
    height:40px;
    width: 100%;
    color: #fff;
    background-color: #3c7bb8;
    text-align: center;
    line-height: 40px;
}

Javascript：

var params = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
};
var getCss = function(o,key){
    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];
};

var startDrag = function(bar, target, callback){
    if(getCss(target, "left") !== "auto"){
        params.left = getCss(target, "left");
    }
    if(getCss(target, "top") !== "auto"){
        params.top = getCss(target, "top");
    }
    //
    bar.onmousedown = function(event){
        params.flag = true;
        if(!event){
            event = window.event;
            //
            bar.onselectstart = function(){
                return false;
            }
        }
        var e = event;
        params.currentX = e.clientX;
        params.currentY = e.clientY;
    };
    this.onmouseup = function(){
        params.flag = false;
        if(getCss(target, "left") !== "auto"){
            params.left = getCss(target, "left");
        }
        if(getCss(target, "top") !== "auto"){
            params.top = getCss(target, "top");
        }
    };
    this.onmousemove = function(event){
        var e = event ? event: window.event;
        if(params.flag){
            var nowX = e.clientX, nowY = e.clientY;
            var disX = nowX - params.currentX, disY = nowY - params.currentY;
            target.style.left = parseInt(params.left) + disX + "px";
            target.style.top = parseInt(params.top) + disY + "px";

            if (typeof callback == "function") {
                callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
            }

            if (event.preventDefault) {
                event.preventDefault();
            }
            return false;
        }
    }
};