使用 HTML5 draggable 属性与 CSS 的 resize 属性实现 DIV 的拖拽与缩放

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-...

墨城之左

1307人浏览 · 2020-02-10 21:09:54

墨城之左 · 2020-02-10 21:09:54 发布

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>

        .ui-widget-content {
            position:absolute;
        }

        .ui-widget-content:hover {
            resize:both;
            overflow:auto;
        }

    </style>
</head>

<body style="background-color: rgb(253, 238, 238);">
    <div id="container" style="width:1000px; height:600px; margin:100px; border-color: black;border-style: solid;">

    </div>

    <script src="./jquery-3.4.1.min.js""></script>

    <script>
        function Grid(elementId){
            this.id = elementId;
            this.el = $("#"+elementId);
            this.top = this.el.offset().top;
            this.widgets = [];
        }

        Grid.prototype.init = function(){
            this.el.on("dragstart", ".ui-widget-content", function(e){
                $(this).data("offsetX", e.clientX - this.offsetLeft);
                $(this).data("offsetY", e.clientY - this.offsetTop);
                $(this).attr("dragging", "true");
            })

            this.el.on("dragend", ".ui-widget-content", function(e){
                let el = $(this);
                el.css("left", e.clientX - el.data("offsetX"));
                el.css("top", e.clientY - el.data("offsetY"));
                $(this).attr("dragging", "false");
            })

            this.el.on("mousedown", ".ui-widget-content", function(e){
                $(this).data("width", this.clientWidth);
                $(this).data("height", this.clientHeight);
            })

            this.el.on("mouseup", ".ui-widget-content", function(e){
                let el = $(this);
                console.log("resize");

                let originalWidth =  el.data("width");
                let originalHeight =  el.data("height");

                if(typeof originalWidth == "undefined"){
                    return;
                }

                if (originalWidth !== this.clientWidth || originalHeight !== this.clientHeight ){
                    
                    $(this).data("width", this.clientWidth);
                    $(this).data("height", this.clientHeight);
                }
            })

            this.el.on("mouseout", ".ui-widget-content", function(e){
                let el = $(this);
                console.log("resize");

                let originalWidth =  el.data("width");
                let originalHeight =  el.data("height");


                if(typeof originalWidth == "undefined"){
                    return;
                }

                if (originalWidth !== this.clientWidth || originalHeight !== this.clientHeight ){
                    $(this).data("width", this.clientWidth);
                    $(this).data("height", this.clientHeight);
                }
            })
        }

        Grid.prototype.addWidget = function(id, style){
            let widgets = this.el.children(".ui-widget-content");

            $(widgets).each(i=>{
                let w = $(widgets[i]);
                let top = w.position().top + Number.parseInt(w.css("height"));

                if(this.top < top) {
                    this.top = top + 10;
                }
            })


            this.el.append(`
                <div id="${id}" class="ui-widget-content" draggable="true"  style="${style};top:${this.top}px">
                </div>
                `);
        }

        let grid = new Grid("container");
        grid.init();

        grid.addWidget("1", "position:absolute;width:300px;height:60px;background-color: gray");
        grid.addWidget("2", "position:absolute;width:300px;height:60px;background-color: red");
        grid.addWidget("3", "position:absolute;width:300px;height:60px;background-color: blue");
        
    </script>
</body>

</html>