javascript - jQuery draggable clone doesn't stay where it is dropped -

i'm using jquery ui clone element div, drag , release @ div. @ first time drop cloned element, change position , goes far released. but, still draggable , stay must @ 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 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 css.

your logic good, you're applying wrong event. $(this) you're using set droppableoffset draggable, because you're calling on stop event of draggable. should on drop event of droppable. also, avoid using top property of window object, it'll give unwanted behavior. 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/