AngularJS + jQueryUI Drag & Drop


Checkout Angular Module to implement drag-and-drop more seemlessly

In this post, I’ve created a simple demo of integration of jQueryUI draggable/droppables in AngularJS. It’s pretty straight forward to understand the code as I’ve heavily commented it so I decided not to explain it in detail.

DEMO

Updates: More advanced version by Mita Glefler below:

Advertisements

7 thoughts on “AngularJS + jQueryUI Drag & Drop

  1. Clean code, nice work. Now it needs some css to limit the width of the items, and to give the two droppzones a border. Otherwise it’s a bit hard to see what’s happening.

    Ugly colors example:

    .list1{float:left;border: 2px solid fuchsia;width:250px;padding:10px;height:200px}
    .list2{float:left;border: 2px solid fuchsia;margin-left:20px;background-color:#87cefa;width:250px;padding:10px;height:200px}

  2. Hi Mita,

    Thanks for the suggestions. Yep, the $watch was not needed and I also fixed the bug you raised myself. Sorry I could not merge your gist with mine but I’d attached your gist in the post for more advanced version instead. Thanks once again.

  3. Hey there! I just would like to give you a huge thumbs up for your great information you
    have right here on this post. I am returning to your web site for more soon.

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