随机拖拽盒子的HTML5演示-优快云博客

本文链接：https://blog.youkuaiyun.com/jiepp/article/details/101152273

练习demo

编辑器制作效果展示：

在这里插入图片描述

代码展示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {margin: 0;padding: 0}
        .d {position: absolute;background-color: deeppink}
    </style>
</head>
<body>
<script>
    var ox;
    var oy;
    var str;
    document.addEventListener("dblclick", cr);
    // 随机盒子宽高
    function cr(e) {
        var odd = document.createElement("div");
        document.body.appendChild(odd);
        odd.className = "d";
        odd.style.width = parseInt(Math.random() * 200 + 50) + "px";
        odd.style.height = parseInt(Math.random() * 200 + 50) + "px";
        odd.style.left = e.clientX - odd.offsetWidth / 2 + "px";
        odd.style.top = e.clientY - odd.offsetHeight / 2 + "px";
        crcolor();
        odd.style.backgroundColor = str;
        crdiv();
    }
    // 创建盒子
    function crdiv() {
        var od = document.querySelectorAll(".d");
        for (var i = 0; i < od.length; i++) {
            od[i].addEventListener("mousedown", run1);
        }
        document.addEventListener("mouseup", run2);
        function run2() {
            for (var i = 0; i < od.length; i++) {
                od[i].removeEventListener("mousemove", run);
            }
        }
        // 实现拖拽
        function run1(e) {
            ox = e.offsetX;
            oy = e.offsetY;
            for (var i = 0; i < od.length; i++) {
                od[i].style.zIndex = 0;
                od[i].addEventListener("mousemove", run);
            }
            this.style.zIndex = 1;
        }
        function run(e) {
            e.target.style.left = e.clientX - ox + "px";
            e.target.style.top = e.clientY - oy + "px";
        }
    }
    // 随机颜色
    function crcolor() {
        var r = Math.random() * 256;
        var g = Math.random() * 256;
        var b = Math.random() * 256;
        str = "rgba(" + parseInt(r).toString() + "," + parseInt(g).toString() + "," + parseInt(b).toString() + ",0.7)";
        return str;
    }
</script>
</body>
</html>

整理笔记时发现自己做的小demo,传上来了，么么哒！