Almost works now, except that when you add a new item, all the existing objects have their ids changed to the newly added item's name.
Can you spot anything weird on it? Cheers On Jul 29, 12:10 pm, Marcos Placona <marcos.plac...@gmail.com> wrote: > 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
