AngularJS drag ‘n’ drop re-order in ngRepeat

EDIT I’ve just got a github up for this here: https://github.com/SimeonC/ngRepeatReorder. I’ve fixed some of the bugs in the code and updated it to run on the 1.2.x angularjs codebase.

I’ve been busy on some small projects that I’ve been doing recently and a little problem I’ve had to overcome is the difficulty of doing drag ‘n’ drop reorders in an ngRepeat.

After looking around the web I came up with the following solution:

See the Pen AngularJS ngRepeat Drag n Drop by SimeonC (@SimeonC) on CodePen

How It Works

In short this works by starting with the ngRepeat code in angular.js. Which in itself is complex as you have to also copy over a bunch of functions that it uses that are hidden elsewhere in the codebase. Then you add all the lovely complexity of moving elements around – I decided to simplify this by limiting the movement within the list bounds and only do vertical re-ordering. I animate this by fiddling with the margins – creating a gap where the ‘dragged’ element is going to drop into and then using +/- margins to position the dragging element correctly. Also we add in classes for display purposes.

The last hurdle I had to overcome is to modify the ngRepeat element before our modified ngRepeat compiles the element, I did this with a second directive that executes before the ngRepeat and adds the event tags onto the element.

About Simeon Cheeseman

I enjoy a wide variety of computer and board games, have a BSc in Computer Science and have played percussion for 18 years.

Posted on August 27, 2013, in AngularJS, CoffeeScript, Javascript and tagged , , , , , . Bookmark the permalink. 8 Comments.

  1. Nice!

    Any chance for a Bower package or GitHub hosting?

  2. Any NuGet package for this?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 84 other followers

%d bloggers like this: