js区域拖拽

最新推荐文章于 2024-09-11 15:33:18 发布

一条闪耀的大蟒蛇`

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量510

点赞数 1

文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/m0_60121436/article/details/121497469

版权

JavaScript DOM操作事件处理拖拽元素定位

关键词由CSDN通过智能技术生成

 //父元素
        var boxEl = document.querySelector('.box');
        // 子元素
        var innerBox = document.querySelector(".innerBox");
        innerBox.onmousedown = function() {
            //获取各个边距
            var startLeft = event.clientX - innerBox.offsetLeft;
            var startTop = event.clientY - innerBox.offsetTop;
            var boxWidth = boxEl.offsetWidth;
            var boxHeight = boxEl.offsetHeight;
            var innerWidth = innerBox.offsetWidth;
            var innerHeight = innerBox.offsetHeight;
            document.onmousemove = function() {
                innerBox.style.left = event.clientX - startLeft + 'px'
                innerBox.style.top = event.clientY - startTop + 'px'
                if (innerBox.offsetTop < 0) {
                    innerBox.style.top = 0;
                }
                if (innerBox.offsetLeft < 0) {
                    innerBox.style.left = 0;
                }
                if (innerBox.offsetLeft >= boxWidth - innerWidth) {
                    innerBox.style.left = boxWidth - innerWidth + "px";
                }
                if (innerBox.offsetTop >= boxHeight - innerHeight) {
                    innerBox.style.top = boxHeight - innerHeight + "px";
                }
            }
        }
        document.onmouseup = function() {
            document.onmousemove = null
        }