OK, so I've made a few changes to it, and now it moves and stays on
the right place, but when i try to move it again, it moves only once
more, and messes up with the ID's, i think it's because the counter is
still incrementing.

Could you please give me some light here?

http://sandbox-placona.appspot.com/demo.html

I'm outputting the div name on the console, so it can be seen using
firebug

Cheers

On Jul 29, 10:19 am, 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

Reply via email to