页面中拖拽DIV元素到达页面中的任意位置

本文链接：https://blog.csdn.net/Will_Season/article/details/128209555

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
    <title>拖放示例-文本</title>
<style>
    .divblok {
        background-color: rgba(172, 16, 172, 0.5);
        width: 200px;
        height: 100px;
        position: absolute;
        left: 20px;
        top: 20px;
    }
</style>

<body>
    <div id="dragdiv" draggable="true" class="divblok">我要移动 </div>
    <script>
        var dragdiv = document.querySelector('#dragdiv');
        var x, y;  //记录到点击时鼠标到移动框左边和上边的距离

        dragdiv.addEventListener('dragstart', function (e) {
            e.dataTransfer.effectAllowed = "move";  //移动效果
            e.dataTransfer.setData("text", '');  //附加数据，　没有这一项，firefox中无法移动
            x = e.offsetX || e.layerX;
            y = e.offsetY || e.layerY;
            return true;
        }, false);

        document.addEventListener('dragover', function (e) {//取消冒泡 ,不取消则不能触发 drop事件
            e.preventDefault() || e.stopPropagation();
        }, false);

        document.addEventListener('drop', function (e) {
            dragdiv.style.left = (e.pageX - x) + 'px';
            dragdiv.style.top = (e.pageY - y) + 'px';
            e.preventDefault() || e.stopPropagation();  //不取消，firefox中会触发网页跳转到查找setData中的内容
        }, false);
    </script>
</body>

</html>