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

Question

我创建了 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());
                }
            });
});

另外，我在 head 部分包含以下内容：

<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>

提前致谢。

Answer 1

所有样式都设置在原始元素的 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>

Answer 2

您的代码没问题，只需为您的 DIV #green 和 #container 和 .editable 调整 CSS。因为你的DIV's 是不可见的。

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