Dropping the draggable on invalid drop zone

caitp / angular-drop

Drag & Drop functionality in AngularJS, no jQuery required

http://caitp.github.io/angular-drop

158 stars 25 forks source link

Dropping the draggable on invalid drop zone #22

Open shidhincr opened 10 years ago

shidhincr commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

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 commented 10 years ago

@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 commented 10 years ago

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

caitp commented 10 years ago

@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 commented 10 years ago

@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 commented 9 years ago

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

caitp commented 9 years ago

Absolutely, although breaking changes creep into ngAnimate pretty often

adam77 commented 9 years ago

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.