Hi Rupak, I've done what you said, and although it now works better, it still falls into being only able to drag the already dropped object once. So if you drag it first time, and try to drag it again, it will only happen once, and if you add more objects it messes up, as you can see here:
http://sandbox-placona.appspot.com/demo.html On Jul 29, 11:20 am, rupak mandal <rupakn...@gmail.com> wrote: > Hi markos, i think that the style of the div is attached to its id (#drag) > that's why it will disappear after dragging. Just attach the style by class > name. or replace the html file. > > On Wed, Jul 29, 2009 at 2:49 PM, Marcos Placona > <marcos.plac...@gmail.com>wrote: > > > > > > > Hi Rupak, thank you very much for that,Although I did exactly what you > > said, it still doesn't work very well. > > > It does create new items and gives them ids and everything, but the > > items simply don't stick to the location, and simply disappear. > > > Here's how it is now: > > >http://sandbox-placona.appspot.com/demo.html > > > I've also changed the style as you suggested. > > > Can you help me a bit more with this? > > > Thanks > > > On Jul 29, 7:21 am, rupak mandal <rupakn...@gmail.com> wrote: > > > 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 > > places.html > 7KViewDownload
