Hi , replace the javascript cod and add "dragafter" class in css
//javascript
$(document).ready(function(){
//Counter
counter = 1
//Make element draggable
$("#drag").draggable({
helper:'clone',
start: function(e, ui){
$(ui.helper).addClass("ui-draggable-helperMoving");
},
stop:function(ev, ui) {
$(ui.helper).addClass("ui-draggable-helperStoped");
var pos=$(ui.helper).offset();
$("#clonediv"+counter).css({"left":pos.left,"top":pos.top});
counter++;
ui.helper.draggable({
stop:function(ev, ui) {
console.log($(ui.draggable).attr("id"));
}
});
}
});
//Make element droppable
$("#frame").droppable({
drop: function(ev, ui) {
var element=$(ui.draggable).clone();
element.addClass("tempclass");
$(this).append(element);
$(".tempclass").attr("id","clonediv"+counter);
$("#clonediv"+counter).removeClass("tempclass");
$("#clonediv"+counter).addClass("dragafter");
}
});
});
//css
.dragafter{
position:absolute;
}
I think it will fulfill the requirement of your problem........
On Tue, Jul 28, 2009 at 8:56 PM, Marcos Placona <marcos.plac...@gmail.com>wrote:
>
> Hi, I'm working with draggable, and basically what I'm trying to
> accomplish is having one item on my screen, that can be dragged
> anywhere, and uses "helper:'clone'", so it still sticks to its main
> location and can be cloned N times.
>
> It all looks good, but I just realized that although cloning is
> possible, it always keep the same ID. Also, when I drag it from one
> side to another it never stays where I dropped it, but stacks up on
> the left hand side.
>
> I've put up a quick example, so you can understand what I'm doing. The
> idea is move the red spots from the left to the right, but they have
> to where they were dropped and have their own ID's.
>
> http://sandbox-placona.appspot.com/places.html
>
> Any help is appreciated
>
> Thanks,
>
> Marcos Placona
> http://www.placona.co.uk/blog
>
