Question

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

html代码：

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

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

jQuery代码：

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

另外，我在主题部分中包含以下内容：

 printf("Is this is true? (1 = yes, 0= false): %d", s[0] >= 0) && (s[0] < (1/7 + 1/14));

提前致谢。

Answer 1

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

＆＃13;

    $(document).ready(function(){
        $(".editable").draggable({helper:'clone'});
        $(".editable").resizable();

        $("#container").droppable({
            drop: function(event,ui){
                $(this).append($(ui.draggable).clone());
            }
        });
    });

＆＃13;

        .green {
            width:100px;
            height:100px;
            background-color:green;
        }

        #container {
            width:500px;
            height:500px;
        }

＆＃13;

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

＆＃13;

Answer 2

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

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

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

2 个答案: