Question

我在Youtube上找到了拖放代码但无法调整其大小它掉了之后。不知道在哪里添加.resizable（）方法

我在元素掉落后调整大小有问题。

我还希望在丢弃和调整大小后保存位置。

请告诉我怎么做我将不胜感激，谢谢

以下是我的代码

<!DOCTYPE html>
<html>
<head>
    <title>HTML5 API: Drag and Drop</title>
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./css/jquery-ui.css">  
    <script src="./js/jquery.js" type="text/javascript"></script>
    <script src="./js/jquery-ui.js"></script>
    <script src="./js/bootstrap.js"></script>
    <meta charset="utf-8">
    <title>Title</title>
     <script>
        $(init);
        function init() {
            var diagram = [];
            var canvas = $(".canvas");
            var tools = $(".tools");
            $(".tool").draggable({
                helper: "clone"
            });
            canvas.droppable({
                drop: function(event, ui) {
                    var node = {
                        _id: (new Date).getTime(),
                        position: ui.helper.position()
                    };
                    node.position.left -= canvas.position().left;
                    if(ui.helper.hasClass("tool-1")){
                        node.type = "TOOL-1";
                    } else if(ui.helper.hasClass("tool-2")){
                        node.type = "TOOL-2";
                    } else if(ui.helper.hasClass("tool-3")){
                        node.type = "TOOL-3";
                    } else {
                        return;
                    }
                    diagram.push(node);
                    renderDiagram(diagram);



                }
            });

            function renderDiagram(diagram) {
                canvas.empty();
                for(var d in diagram) {
                    var node = diagram[d];
                    var html = "";
                    if(node.type === "TOOL-1") {
                        html = "<h3>TOOL 1</h3>";
                    } else if(node.type === "TOOL-2") {
                        html = "<h3>TOOL 2</h3>";
                    } else if(node.type === "TOOL-3") {
                        html = "<h3>TOOL 3</h3>";
                    }
                    var dom = $(html).css({
                        "position": "absolute",
                        "top": node.position.top,
                        "left": node.position.left
                    }).draggable({
                        stop: function(event, ui) {
                            console.log(ui);
                            var id = ui.helper.attr("id");
                            for(var i in diagram) {
                                if(diagram[i]._id == id) {
                                    diagram[i].position.top = ui.position.top;
                                    diagram[i].position.left = ui.position.left;
                                }
                            }
                        }
                    }).attr("id", node._id);

                    canvas.append(dom);
                }
            }
        }
    </script>
    <style type="text/css">
        h3{
            border: 2px solid gray;
            border-radius: 5px;
            padding: 5px;
            white-space: nowrap;
            z-index: 2;
        }
        .row{
            margin-right: -15px;
            margin-left: :-15px;
            height: 100%
            position: relative; 
        }
        .col-xs-3{
            width: 25%;
            position: absolute;
            top: 0px;
            bottom: 0px;
            left: 0px;  
        }
        .col-xs-9{
            width: 75%;
            position: absolute;
            right: 0px;
            bottom: 0px;
            top: 0px;
        }
    </style>

</head>
<body>
    <div class="container-fluid" style="position: absolute; bottom: 0px; top: 0px; left: 0px;
    right: 0px">
        <h1>Drag and Drop Tools Onto Canvas</h1>
        <div class="row">
            <div class="col-xs-3 tools" style="background-color: #9acfea;">
                <h2>Tools</h2>
                <h3 class="tool tool-1">Tool 1</h3>
                <h3 class="tool tool-2">Tool 2</h3>
                <h3 class="tool tool-3">Tool 3</h3>
            </div>
            <div class="col-xs-9 canvas" style="background-color: beige;">
                <h2>Canvas</h2>
            </div>
        </div>
    </div>

</body>
</html>

拖放后调整大小

0 个答案: