jQuery UI: 拖动时克隆元素不显示

jQuery UI: clone element not showing while dragging

我创建了 2 个 div,我想将第一个 div 的克隆拖放到第二个 div 中。问题是克隆在我拖动它时消失了,但是一旦它被放到第二个 div.

中就会出现

html代码:

<div id="green" class="editable"></div>
<div id="container"></div>

jQuery代码:

$(document).ready(function(){
            $(".editable").draggable({helper:'clone'});
            $(".editable").resizable();  

            $("#container").droppable({
                drop: function(event,ui){
                        $(this).append($(ui.draggable).clone());
                }
            });
});

此外,我在标题部分包含以下内容:

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

提前致谢。

您的所有样式都设置在原始元素的 ID 上。
克隆元素时,不会应用样式。这就是你认为它消失的原因。实际上,它只是获得默认背景颜色,即透明。
请注意,我将您的 id="green" 更改为 class="green"

    $(document).ready(function(){
        $(".editable").draggable({helper:'clone'});
        $(".editable").resizable();

        $("#container").droppable({
            drop: function(event,ui){
                $(this).append($(ui.draggable).clone());
            }
        });
    });
        .green {
            width:100px;
            height:100px;
            background-color:green;
        }

        #container {
            width:500px;
            height:500px;
        }
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="editable green"></div>
<div id="container" style = 'background-color:red;'></div>

您的代码没问题,只需为您的 DIV #green#container.editable 调整 CSS。因为你的DIV's是隐形的。

<div id="green" class="editable"></div>
<div id="container"></div>