Lighthouse has a new layout. Prefer the old one? Return to the old layout, and switch back any time from the link at the top of each page.

Draggable fails to restore CSS after dragging

#380

I just noticed that Draggable plugin doesn't restore CSS of the element dragged to its previous state after dragging. This can be troublesome if your code happens to rely on some certain predefined styling (Draggable overrides this).

Reported by Juho Vepsäläinen · October 16th, 2010 @ 11:08 AM

State: invalid
Milestone: none
Assigned to: nobody

Activity

  1. MadRabbit
    MadRabbit
    • State changed from new to invalid

    okay, I looked through the code and it seems like there is no way to make this thing working properly for all the cases,

    it does automatically restore the styles if you deal with clone-drag or a revert-drag, but when you deal with a normal drag, there is no way to tell what the developer actually need. See, you might drag an inline element, then Draggable will preserve its sizes so the element didn't blow off when it will be pulled out of its original context. But once the user finishes the drag it all depends on what the app logic is. Some one might want this thing just stay where it is, some might want to put the element into other context, some wan't it adjust to the new context, some might want it to keep the original shape.

    so I believe every case should be handled separately via callbacks

    October 17th, 2010 @ 12:07 PM

  2. Juho Vepsäläinen
    Juho Vepsäläinen

    Thanks for the explanation. :)

    I tried hacking around the issue by stashing the old style at 'before' and then restoring it at 'stop'. The problem was that the CSS markup had been altered already at 'before' making this approach not work. Perhaps 'before' needs to be triggered before that or perhaps there needs to be an additional event ('init'?) to hook into.

    October 17th, 2010 @ 12:24 PM

  3. MadRabbit
    MadRabbit

    Hmm, are you sure? I'm looking at the code and the 'before' event is fired before any changes

    afterwards you can run your stuff right after constructing a draggable.

    var draggable = new Draggbale('my-element');

draggable.old_stuff = $('my-element').getStyle('...');
draggable.onStop(function() {
  this.element....;
});

    October 17th, 2010 @ 03:31 PM

  4. Juho Vepsäläinen
    Juho Vepsäläinen

    Thanks. :)

    I ended up using direct DOM access to reset style to original. Here's my initial solution: http://gist.github.com/630800 .

    Since "style" attribute is empty by default I could probably get rid of that "draggable.oldStyle" part and just set style attribute as empty. I guess having it there doesn't hurt.

    October 17th, 2010 @ 04:27 PM

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.