pc拖拽实践

最新推荐文章于 2022-12-16 18:02:52 发布

Tango_p

最新推荐文章于 2022-12-16 18:02:52 发布

阅读量155

点赞数

分类专栏：前端文章标签：拖拽 js

本文链接：https://blog.csdn.net/qq_35898008/article/details/89323405

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文介绍了如何在PC端使用JavaScript实现元素的拖放功能，包括拖拽开始、拖动过程和释放时的处理，详细讲解了相关事件及示例代码，帮助开发者掌握Web页面的拖放交互实现。

摘要由CSDN通过智能技术生成

pc拖拽踩坑之路

今天搞了个拖拽发现挺多问题，上网找了下，主要是两个问题：需要在onmousedown和onmousemove添加阻止默认事件，主要是图片拖拽的默认事件和文本选中的默认事件，还要就是如果页面有iframe，阻止默认事件没有作用，需要弄个遮罩。

<body>
    <div><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p><p>哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或或</p></div>
    <iframe src="./frame.html" frameborder="0"></iframe>
    <div class="box"><img src="https://t1.huanqiu.cn/5f1d86a6326280a9fbfe5e05e03fca9d.jpg"  alt=""></div>
    <div class="mask"></div>
</body>
<script>
window.onload = function(){
    var oBox = document.getElementsByClassName('box')[0]
    var mask = document.getElementsByClassName('mask')[0]
    oBox.addEventListener('mousedown', function(e){
        mask.style.display = 'block'
        console.log(e)
        var oEvent = e || event
        var disX = oEvent.clientX - oBox.offsetLeft
        var disY = oEvent.clientY - oBox.offsetTop
        oEvent.preventDefault();
        function move(e){
            var oEvent = e || event
            oEvent.preventDefault();
            oBox.style.left = oEvent.clientX - disX + 'px'
            oBox.style.top = oEvent.clientY - disY + 'px'
        }
        document.addEventListener('mousemove',move )
        document.addEventListener('mouseup',function(){
            document.removeEventListener('mousemove',move)
            mask.style.display = 'none'
        })
        return false;
    })
}
</script>