论坛 › 欢乐水吧 › 爱她就圈住她

马黑黑 发表于 2022-5-17 13:20

爱她就圈住她

<style>

.stage {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 740px;
        height: 560px;
        background: #eee;
        box-shadow: 1px 1px 2px #666;
        position: relative;
}
.stage::before {
        position: absolute;
        content: '图片拖拽不出父元素';
        top: 10px;
        left: 10px;
        font: normal 14px sans-serif;
}
.movBox {
        position: absolute;
        width: 120px;
        height: 120px;
        background: #ccc url('/data/attachment/forum/202205/17/131141iqoznnyfo4pqgqna.jpg') no-repeat;
        border-radius: 50%;
        cursor: pointer;
}

</style>

<div class="stage">
        <div class="movBox"></div>
</div>

<script>

let canMove = false;
let m2pgX, m2pgY,m2eX,m2eY;
let movBox = document.querySelector('.movBox');
let stage = document.querySelector('.stage');

movBox.onmousedown = function(e){
        e = e || event;
        canMove = true;
        m2pgX = e.pageX;
        m2pgY = e.pageY;
        m2eX = m2pgX - this.offsetLeft;
        m2eY = m2pgY - this.offsetTop;
}

movBox.onmousemove = function(e){
        if(canMove){
                e = e || event;
                m2pgX = e.pageX;
                m2pgY = e.pageY;
                let eLeft = m2pgX - m2eX;
                if(eLeft < 0) eLeft = 0;
                if(eLeft > stage.clientWidth - this.clientWidth) eLeft = stage.clientWidth - this.clientWidth;
                let eTop = m2pgY - m2eY;
                if(eTop < 0) eTop = 0;
                if(eTop > stage.clientHeight - this.clientHeight) eTop = stage.clientHeight - this.clientHeight;
                this.style.left = eLeft+ 'px';
                this.style.top = eTop + 'px';
        }
}

movBox.onmouseup = function() { canMove = false; }
movBox.onmouseleave = function(){ canMove = false; }

</script>

马黑黑 发表于 2022-5-17 13:20

这叫有边界拖拽。全部代码：
<style>

.stage {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 740px;
        height: 560px;
        background: #eee;
        box-shadow: 1px 1px 2px #666;
        position: relative;
}
.stage::before {
        position: absolute;
        content: '图片拖拽不出父元素';
        top: 10px;
        left: 10px;
        font: normal 14px sans-serif;
}
.movBox {
        position: absolute;
        width: 120px;
        height: 120px;
        background: #ccc url('/data/attachment/forum/202205/17/131141iqoznnyfo4pqgqna.jpg') no-repeat;
        border-radius: 50%;
        cursor: pointer;
}

</style>

<div class="stage">
        <div class="movBox"></div>
</div>

<script>

let canMove = false;
let m2pgX, m2pgY,m2eX,m2eY;
let movBox = document.querySelector('.movBox');
let stage = document.querySelector('.stage');

movBox.onmousedown = function(e){
        e = e || event;
        canMove = true;
        m2pgX = e.pageX;
        m2pgY = e.pageY;
        m2eX = m2pgX - this.offsetLeft;
        m2eY = m2pgY - this.offsetTop;
}

movBox.onmousemove = function(e){
        if(canMove){
                e = e || event;
                m2pgX = e.pageX;
                m2pgY = e.pageY;
                let eLeft = m2pgX - m2eX;
                if(eLeft < 0) eLeft = 0;
                if(eLeft > stage.clientWidth - this.clientWidth) eLeft = stage.clientWidth - this.clientWidth;
                let eTop = m2pgY - m2eY;
                if(eTop < 0) eTop = 0;
                if(eTop > stage.clientHeight - this.clientHeight) eTop = stage.clientHeight - this.clientHeight;
                this.style.left = eLeft+ 'px';
                this.style.top = eTop + 'px';
        }
}

movBox.onmouseup = function() { canMove = false; }
movBox.onmouseleave = function(){ canMove = false; }

</script>

加林森 发表于 2022-5-17 13:23

学习学习，谢谢老黑教程！

梦油 发表于 2022-5-17 14:41

她当俺的小孙女儿还差不多。{:4_170:}

朵拉 发表于 2022-5-17 15:08

手机上不好操作拖拽，就看一看{:4_190:}

来看你 发表于 2022-5-17 16:02

小美女萌萌哒，带着她溜达一圈

醉美水芙蓉 发表于 2022-5-17 16:55

马黑黑 发表于 2022-5-17 18:15

醉美水芙蓉 发表于 2022-5-17 16:55
小美女好可爱！

能拖走么

马黑黑 发表于 2022-5-17 18:15

梦油 发表于 2022-5-17 14:41
她当俺的小孙女儿还差不多。

可以考虑

马黑黑 发表于 2022-5-17 18:16

朵拉 发表于 2022-5-17 15:08
手机上不好操作拖拽，就看一看

手机没试过，用的是标准的鼠标事件

红影 发表于 2022-5-17 18:59

这个好玩，我使劲拖也拖不出去了。这个带不走了{:4_189:}

大猫咪 发表于 2022-5-17 19:22

必须圈住她 {:4_170:}空了学习，老黑晚上好！ {:4_204:}{:4_190:}

马黑黑 发表于 2022-5-17 19:30

大猫咪 发表于 2022-5-17 19:22
必须圈住她 空了学习，老黑晚上好！

{:4_180:}

马黑黑 发表于 2022-5-17 19:33

红影 发表于 2022-5-17 18:59
这个好玩，我使劲拖也拖不出去了。这个带不走了

东篱可以四处走走看世界，这个只能待在宫里了

梦油 发表于 2022-5-17 20:15

马黑黑 发表于 2022-5-17 18:15
可以考虑

哈哈哈……我的小孙女已经是而立之年的人啦

醉美水芙蓉 发表于 2022-5-17 21:08

马黑黑 发表于 2022-5-17 21:13

醉美水芙蓉 发表于 2022-5-17 21:08
带着走啦！

挺好

红影 发表于 2022-5-19 12:14

马黑黑 发表于 2022-5-17 19:33
东篱可以四处走走看世界，这个只能待在宫里了

这个莫非是后宫{:4_173:}

马黑黑 发表于 2022-5-19 12:16

红影 发表于 2022-5-19 12:14
这个莫非是后宫

估计是吧

红影 发表于 2022-5-19 20:16

马黑黑 发表于 2022-5-19 12:16
估计是吧

圈得好，东篱大哥还指望后宫卖个好价钱呢{:4_173:}

查看完整版本: 爱她就圈住她