Dropping the draggable on invalid drop zone

[shidhincr]

Can we've a feature that when a draggable element is dropped on an invalid drop zone, the element can move back to it's previous place ?

I'm not sure if this is already implemented.. If not consider this as a feature request.

[caitp]

Yeah, this is something I'd like to do, but it's not totally clear how this should work. JS animations are probably the easiest (but least performant) way to do this, and would fit in nicely with ngAnimate.

Want to try implementing this @shidhincr?

[shidhincr]

Yeah .. I guess that would be a cool feature to be implemented. definitely I want to try this .. but need some time to play around with ngAnimate first.

Anyways thanks for the reply @caitp .. I'll try it and update you

[shidhincr]

@caitp , I started working on this.. But needs some starting points.

Do you think including the dependency to ngAnimate is good ? or should I start with CSS animations ?

[caitp]

Depending on ngAnimate is fine for 1.2.x+, so that's fine with me

[caitp]

@shidhincr hows it going, have you made any progress with this?

I can take over work on it if you don't think you can finish it

[shidhincr]

@caitp I didn't make much progress on it, as I am in a vacation and don't have access to my laptop.

Glad if you can take over.. I can join back once after my vacation

[adam77]

Are we ok with an angular 1.4 (new animation engine) solution to this?

[caitp]

Absolutely, although breaking changes creep into ngAnimate pretty often

[adam77]

possible (mostly) CSS solution:

• for statically positioned elements, use relative positioning during the drag process (so they have somewhere to return; note jq-ui uses relative)
• on (invalid) dragEnd add style transition: top .5s, left .5s
• on (invalid) dragEnd set style.top,style.left to 0 (or initial values for pre-drag positioned elements)
• on transitionEnd (css event) reset initial style.position; remove transition

notes:

• won't work on ie9 (the transition could be considered example of progressive enhancement and therefore not essential; ie9 support could be added at a later date)
• this solution doesn't make use of ngAnimate
• it's kind of a 'clean', hopefully performant soln.