jQuery draggable clone doesn't stay where it is dropped

Question

I'm using jQuery UI to clone a element from a div, drag and release at another div. At first time I drop the cloned element, it change the position and goes far from where was released. But, it still draggable and stay where must be at the other times.

$(document).ready(function(){
    var counter = 1;
    $(".drag").draggable({
        revert: "invalid",
        helper: 'clone',
        cursor: "crosshair",
        containment: 'frame',
        stop: function(event, ui) {
            var cloned = $(ui.helper).clone();
            cloned.attr("id", "clonedElem" + counter);
            var pos = $(ui.helper).offset();

            var draggableOffset = ui.helper.offset(),
                droppableOffset = $(this).offset(),
                left = draggableOffset.left - droppableOffset.left,
                top = draggableOffset.top - droppableOffset.top;

            cloned.css({
                "position": "absolute",
                "left": left,
                "top": top
            });

            cloned.attr("visible", "true");

            cloned.draggable({
                containment: 'parent',
                stop:function(ev, ui) {
                    console.log("aqui");
                }
            });
            $("#frame").append(cloned);
            counter++;
        }
    });  

    $("#frame").droppable({
        accept: ".drag",
    });
});

And the HTML:

<div id="wrapper">
    <ul id="options" class="list-group col-md-1">
        <li class="list-group-item">
            <div id="drag1" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-fire"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag2" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-magnet"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag3" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-globe"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag4" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-briefcase"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag5" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-tower"></span>
                </h1>
            </div>
        </li>
        <li class="list-group-item">
            <div id="drag6" class="drag ui-draggable">
                <h1>
                    <span class="glyphicon glyphicon-tree-deciduous"></span>
                </h1>
            </div>
        </li>
    </ul>
    <div id="frame" class="col-md-11 ui-droppable" style="border: 2px #000 solid; height: 558px;">
    </div>
</div>

I'm using Bootstrap 3 to the CSS.

Answer 1

Your logic is good, but you're applying to the wrong event. The $(this) you're using to set droppableOffset is actually the draggable, because you're calling it on the stop event of draggable. It should be on the drop event of the droppable. Also, avoid using top as it is a property of the window object, so it'll give unwanted behavior. This should work:

$(document).ready(function(){
    var counter = 1;
    $(".drag").draggable({
        revert: "invalid",
        helper: 'clone',
        cursor: "crosshair",
        containment: 'frame',

    });  

    $("#frame").droppable({
        accept: ".drag",
        drop: function(event, ui) {
            var cloned = $(ui.helper).clone();
            cloned.attr("id", "clonedElem" + counter);
            var pos = $(ui.helper).offset();

            var draggableOffset = ui.helper.offset(),
                droppableOffset = $(this).offset(),
                left = draggableOffset.left - droppableOffset.left,
                thisTop = draggableOffset.top - droppableOffset.top;

            cloned.css({
                "position": "absolute",
                "left": left,
                "top": thisTop
            });

            cloned.attr("visible", "true");

            cloned.draggable({
                containment: 'parent',
                stop:function(ev, ui) {
                    console.log("aqui");
                }
            });
            $("#frame").append(cloned);
            counter++;
        }
    });
});

fiddle: https://jsfiddle.net/vv6rzc4L/