Question

我正在尝试创建一个类似的编辑器，如果你选择给定部分的布局，然后将另一个段落，按钮，img等放到该布局的内容区域。问题是，当我放弃第一个div“布局”并且我尝试将项目放到该div时，它会选择错误的可放置区域，因为它位于“后面”，就像z-index错误一样，但正确的区域是可见的。

我将i jsfiddle作为代码示例，我在控制台中记录了droppable区域的id和被删除的项目： https://jsfiddle.net/g9aragsp/3/

所以我想将一个“项目”添加到“insidedrop”而不是“编辑器”。我只在第一个布局上设置id“insidedrop”用于测试目的。

我的HTML：

    <div class="container-fluid">
    <div class="row content">
        <div class="col-sm-8 col-sm-offset-2">
            <div class="row htmlEditor">
                <div class="col-sm-3" style="background-color: gray; min-height: 800px;">
                    <p style="border-bottom: 5px solid black">Layouts</p>

                    <ul id="layouts" style="list-style-type: none;">
                        <li id="layout1" class="PickerButton">layout1</li>
                        <li id="layout2" class="PickerButton">layout2</li>
                        <li id="layout3" class="PickerButton">layout3</li>
                    </ul>

                    <p style="border-bottom: 5px solid black">Items</p>
                    <ul id="items" style="list-style-type: none;">
                        <li id="item1" class="PickerButton">button</li>
                        <li id="item2" class="PickerButton">img</li>
                        <li id="item3" class="PickerButton">text</li>
                    </ul>

                </div>

                <div id="editor" class="col-sm-9" style="background-color: lightgray; min-height: 800px; padding: 20px;">

                </div>
            </div>
        </div>
    </div>
</div>

我的Javascript： $（function（）{

        var $layouts = $("#layouts"),
            $items = $("#items"),
            $insideDrop = $("#insideDrop"),
            $trash = $("#editor");


        $("li", $layouts).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });

        $("li", $items).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });


        $trash.droppable({
            //accept: "#list1 > li",
            drop: function (event, ui) {
                console.log(ui.draggable.attr("id"));
                console.log($(this).attr("id"));
                if (ui.draggable.attr("id") == "layout1")
                    $("#editor").append("<div class='layout1Outer' style='min-height:400px; margin-bottom: 15px;'><div class='layout1imageplaceholder' style='background-color:#8a2be2;height:150px'></div><div class='layout1content' id='insideDrop' style='background-color:bisque;min-height:250px'></div></div>");

                if (ui.draggable.attr("id") == "layout2")
                    $("#editor").append("<div class='layout2Outer' style='min-height:400px; margin-bottom: 15px;'><div class='layout2imageplaceholder' style='background-color:#8a2be2;float:right;height:400px;width:40%'></div><div class='layout2content' style='background-color:bisque;float:left;min-height:400px;width:60%'></div></div>");

                if (ui.draggable.attr("id") == "layout3")
                    $("#editor").append("<div class='layout3Outer' style='min-height:400px; margin-bottom: 15px;'><div class='layout3imageplaceholder' style='background-color:#8a2be2;float:left;height:400px;width:40%'></div><div class='layout3content' style='background-color:bisque;float:right;min-height:400px;width:60%'></div></div>");


            }
        });

        $insideDrop.droppable({
            drop: function (event, ui) {
                if (ui.draggable.attr("id") == "item1")
                    $("#insideDrop").append("<span id='button' style='background-color:#dc143c;padding: 10px; width: 50px'>BUTTON</span>");

                if (ui.draggable.attr("id") == "item2")
                    $("#insideDrop").append("<img src='http://via.placeholder.com/50x50'>");

                if (ui.draggable.attr("id") == "item3")
                    $("#insideDrop").append("<p style='background- color: #284B63; padding: 10px; width: 200px; color: white;'>Insert text here</p>");


                console.log(ui.draggable.attr("id"));
            }
        });



    });

Answer 1

我找到了问题的解决方案。而不是针对嵌套的“可放置”容器。我重复使用相同的功能，并在悬停时使javascript返回当前悬停的对象，然后将项目附加到该特定对象，如下所示：

    var hoveredObj;

        function getid(obj) {
            hoveredObj = obj;
    }


        var $layouts = $("#layouts"),
            $items = $("#items"),
            $insideDrop = $("#insideDrop"),
            $editor = $("#editor");


        $("li", $layouts).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });

        $("li", $items).draggable({
            cancel: "button", // these elements won't initiate dragging
            revert: "invalid", // when not dropped, the item will revert back to its initial position
            containment: "document",
            helper: "clone",
            cursor: "move"
        });


        $editor.droppable({
            //accept: "#list1 > li",
            drop: function (event, ui) {

                console.log(ui.draggable.attr("id"));
                console.log($(this).attr("id"));
                if (ui.draggable.attr("id") == "layout1")
                    $("#editor").append("<div class='layout1Outer' style='min-height:400px; margin-bottom: 15px;'><div class='layout1imageplaceholder' style='background-color:#8a2be2;height:150px'></div><div class='layout1content' id='insideDrop' onmouseover='getid(this)' style='background-color:bisque;min-height:250px'></div></div>");

                if (ui.draggable.attr("id") == "layout2")
                    $("#editor").append("<div class='layout3Outer' style='min-height:400px; margin-bottom: 15px;'><div class='layout3imageplaceholder' style='background-color:#8a2be2;float:left;height:400px;width:40%'></div><div class='layout3content' style='background-color:bisque;float:right;min-height:400px;width:60%'></div></div>");

                if (ui.draggable.attr("id") == "layout3")
                    $("#editor").append("<div class='layout2Outer' style='min-height:400px; margin-bottom: 15px;'><div class='layout2imageplaceholder' style='background-color:#8a2be2;float:right;height:400px;width:40%'></div><div class='layout2content' style='background-color:bisque;float:left;min-height:400px;width:60%'></div></div>");


                if (ui.draggable.attr("id") == "item1")
                    $(hoveredObj).append("<span id='button' style='background-color:#dc143c;padding: 10px; width: 50px'>BUTTON</span>");

                if (ui.draggable.attr("id") == "item2")
                    $(hoveredObj).append("<img src='http://via.placeholder.com/50x50'>");

                if (ui.draggable.attr("id") == "item3")
                    $(hoveredObj).append("<p style='background- color: #284B63; padding: 10px; width: 200px; color: white;'>Insert text here</p>");

            }
        });

做一个掉落的div，再次放弃

1 个答案: