Javascript 做一个下降的跳水，再次下降_Javascript_Jquery_Css

Javascript 做一个下降的跳水，再次下降

javascript jquery css

Javascript 做一个下降的跳水，再次下降,javascript,jquery,css,Javascript,Jquery,Css,我试图做一个编辑，如果你为给定的部分选择布局，然后在布局的内容区域中添加另一个段落、按钮、img等。问题是，当我删除第一个div“layout”并尝试将一个项目删除到该div时，它选择了错误的可删除区域，因为它位于该div的“后面”，好像z索引是错误的，但正确的区域是可见的我将i jsfiddle作为代码的一个示例，我正在控制台中记录可拖放区域和已拖放项的id：因此，我想在“insidedrop”中添加一个“条目”，而不是“编辑器”。我只在第一个布局上设置id“insidedrop”用于

我试图做一个编辑，如果你为给定的部分选择布局，然后在布局的内容区域中添加另一个段落、按钮、img等。问题是，当我删除第一个div“layout”并尝试将一个项目删除到该div时，它选择了错误的可删除区域，因为它位于该div的“后面”，好像z索引是错误的，但正确的区域是可见的

我将i jsfiddle作为代码的一个示例，我正在控制台中记录可拖放区域和已拖放项的id：

因此，我想在“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>


布局

布局1
布局2
布局3

项目

按钮
img
文本

我的Javascript： $（函数（）{

var$layouts=$（“#layouts”），
$items=$（“#items”），
$insideDrop=$（“#insideDrop”），
$trash=$（“#编辑器”）；
$（“li”，$布局）。可拖动({
取消：“按钮”//这些元素不会启动拖动
revert:“invalid”//未删除时，项目将恢复到其初始位置
遏制：“文件”，
助手：“克隆”，
光标：“移动”
});
$（“li”，$项）。可拖动({
取消：“按钮”//这些元素不会启动拖动
revert:“invalid”//未删除时，项目将恢复到其初始位置
遏制：“文件”，
助手：“克隆”，
光标：“移动”
});
$trash.dropable({
//接受：“#列表1>li”，
drop：函数（事件、用户界面）{
log（ui.draggable.attr（“id”）；
log（$（this.attr（“id”））；
if（ui.draggable.attr（“id”）=“layout1”）
$（“#编辑器”）。追加（“”）；
if（ui.draggable.attr（“id”）=“layout2”）
$（“#编辑器”）。追加（“”）；
if（ui.draggable.attr（“id”）=“layout3”）
$（“#编辑器”）。追加（“”）；
}
});
$insideDrop.dropable({
drop：函数（事件、用户界面）{
if（ui.draggable.attr（“id”）=“item1”）
$（“#insideDrop”）.append（“按钮”）；
if（ui.draggable.attr（“id”）=“item2”）
$（“#insideDrop”）。追加（“”）；
if（ui.draggable.attr（“id”）=“item3”）
$（“#insideDrop”）.append（在此处插入文本）；
log（ui.draggable.attr（“id”）；
}
});
});

我想出了解决这个问题的办法。而不是针对嵌套的“可拖放”容器。我重用了相同的函数，并在悬停时使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>");

            }
        });

var hoveredObj；
函数getid（obj）{
hoveredObj=obj；
}
变量$layouts=$（“#layouts”），
$items=$（“#items”），
$insideDrop=$（“#insideDrop”），
$editor=$（“#editor”）；
$（“li”，$布局）。可拖动({
取消：“按钮”//这些元素不会启动拖动
revert:“invalid”//未删除时，项目将恢复到其初始位置
遏制：“文件”，
助手：“克隆”，
光标：“移动”
});
$（“li”，$项）。可拖动({
取消：“按钮”//这些元素不会启动拖动
revert:“invalid”//未删除时，项目将恢复到其初始位置
遏制：“文件”，
助手：“克隆”，
光标：“移动”
});
$editor.droppable({
//接受：“#列表1>li”，
drop：函数（事件、用户界面）{
log（ui.draggable.attr（“id”）；
log（$（this.attr（“id”））；
if（ui.draggable.attr（“id”）=“layout1”）
$（“#编辑器”）。追加（“”）；
if（ui.draggable.attr（“id”）=“layout2”）
$（“#编辑器”）。追加（“”）；
if（ui.draggable.attr（“id”）=“layout3”）
$（“#编辑器”）。追加（“”）；
if（ui.draggable.attr（“id”）=“item1”）
$（hoveredObj）.append（“按钮”）；
if（ui.draggable.attr（“id”）=“item2”）
$（hoveredObj）。追加（“”）；
if（ui.draggable.attr（“id”）=“item3”）
$（hoveredObj）.append（在此处插入文本）；
}
});

$insideDrop

不包含任何元素。jquery集合不是活动的。因此，如果我理解您的评论是正确的，我需要在创建一个布局时初始化它？是的。尽管如此，在这样做之后，它仍然不起作用。但至少它是一个ste

    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>");

            }
        });