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

喜欢他就拖拽他


<style>

.stage {
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 400px;
        background: #eee;
        box-shadow: 1px 1px 2px #666;
        position: relative;
}
.movBox {
        position: absolute;
        width: 102px;
        height: 120px;
        background: #ccc url('/uc_server/data/avatar/000/00/42/93_avatar_middle.jpg') no-repeat;
        border-radius: 50%;
        cursor: pointer;
}

.msgBox { position: absolute;top: 10px; left: 10px; font: normal 14px sans-serif; }

</style>

<div class="stage">
        <div class="movBox"></div>
        <div class="msgBox">拖拽图片到任何位置</div>
</div>

<script>

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

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;
                this.style.left = m2pgX - m2eX + 'px';
                this.style.top = m2pgY - m2eY + 'px';
        }
}

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

</script>

千羽 发表于 2022-5-16 21:38

哈哈{:4_189:}

马黑黑 发表于 2022-5-16 21:41

本帖最后由 马黑黑 于 2022-5-16 21:46 编辑

过去介绍过h5的拖拽功能，那是机械化的操作，源要先看法可拖动功能，还得有接收源。

这个案例，通过JS对元素的直接操作，可以随意拖动。具体方法是，被拖动对象设为绝对定位，然后通过改变 style 属性的 left 与 top 值来达到拖动的目的，期间需要判断与计算鼠标指针距离文档左边与上边的数据，及所操作对象基于 left 与 top的偏移位置，并依据两者的数据得出的鼠标指针移动的距离从而确定被移动对象的位置。

马黑黑 发表于 2022-5-16 21:46

千羽 发表于 2022-5-16 21:38
哈哈

能拖得动不？

千羽 发表于 2022-5-16 21:47

马黑黑 发表于 2022-5-16 21:46
能拖得动不？

哈哈没拖{:4_189:}

红影 发表于 2022-5-16 22:08

这个有趣，能拖出底图范围，设置能拖到回复框的上方，几乎可以拖到任何位置呢{:4_199:}

红影 发表于 2022-5-16 22:09

东篱大哥被拖来拖去的，要被拖散架了{:4_170:}

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

红影 发表于 2022-5-16 22:09
东篱大哥被拖来拖去的，要被拖散架了

东篱有武功，不怕拖

马黑黑 发表于 2022-5-16 22:13

千羽 发表于 2022-5-16 21:47
哈哈没拖

舍不得？

加林森 发表于 2022-5-16 22:14

手机不行的。

马黑黑 发表于 2022-5-16 22:14

红影 发表于 2022-5-16 22:08
这个有趣，能拖出底图范围，设置能拖到回复框的上方，几乎可以拖到任何位置呢

无边界，文档范围内，也是是浏览器当前视口范围，都可以

马黑黑 发表于 2022-5-16 22:15

加林森 发表于 2022-5-16 22:14
手机不行的。

嗯，没有针对移动设备做编程

千羽 发表于 2022-5-16 22:17

马黑黑 发表于 2022-5-16 22:13
舍不得？

从何说起啊？{:6_229:}你不是有个前提吗？

绿叶清舟 发表于 2022-5-16 22:21

拖也去有板子不{:4_189:}

加林森 发表于 2022-5-16 22:45

我准备拿版子了。。。。{:4_189:}

山人 发表于 2022-5-16 22:52

拖人下水的吗

马黑黑 发表于 2022-5-16 23:00

山人 发表于 2022-5-16 22:52
拖人下水的吗

怎么会？拖去洗澡{:5_117:}

马黑黑 发表于 2022-5-16 23:04

千羽 发表于 2022-5-16 22:17
从何说起啊？你不是有个前提吗？

额，你不喜欢，你是啥呢

加林森 发表于 2022-5-17 09:20

马黑黑 发表于 2022-5-16 22:15
嗯，没有针对移动设备做编程

哦，明白了。

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

加林森 发表于 2022-5-17 09:20
哦，明白了。

用到的事件都是鼠标事件
页: [1] 2
查看完整版本: 喜欢他就拖拽他