fifth fifth - 1 month ago 7
HTML Question

jQuery UI: clone element not showing while dragging

I have created 2 divs and I want to drag and drop a clone of the first div into the second div. The problem is that the clone disappears while I'm dragging it, but appears once it is being dropped into the second div.

The html code:

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


The jQuery code:

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

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


Also, I include the following in the head section:

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


Thanks in advance.

Answer

All your styles are set on the ID of the original element.
When you clone your element, the styles are not applied. That's the reason you think it disappears. Actually, it just gets default background color, which is transparent.
Please note that I changed your id="green" to 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>