33

I have an app for which I would like to be able to drag and drop to reorder and arrange colours into groups. jQuery's sortable for grids seems rather unresponsive and a little buggy. microjs recommends kbjr's DragDrop, but that library has no concept of lists, only movable objects. Sproutcore has a nice implementation, but I can't find a demo of it working for a grid.

My UI looks like this:

groups of colours

and I'd like users to be able to drag colours around within the groups as well as drag them between groups.

nornagon
  • 14,755
  • 18
  • 69
  • 84
  • 1
    A question to ask is : Is there purpose for transient grouping? I'd imagine yes. Assuming this - you should really start @ "what are these collections" in the sense of how you associate them and how that association is meaningful to the end user. edit (sorry hit enter) you'll need to listen to drag / drop placements and likely the best(easiest?) approach is the mass assignment / unassignment of classes. These classes should be representative of the collections @ some level and you will likely need several or more to describe this behavior correctly-edit2-I'm partial to Jquery.so id start there – Brandt Solovij Apr 28 '12 at 08:17

3 Answers3

47

Try this: HTML5 Sortable. It is a jQuery plugin to create sortable lists and grids using native HTML5 drag and drop API.

somdow
  • 6,014
  • 10
  • 39
  • 55
Farhadi
  • 752
  • 6
  • 6
  • 1
    +1 but I have a problem. I can't replace the first item. I mean if I drag the second or third on the first place, the first one isn't replaced. What could be wrong? Thanks! – VladL Nov 26 '13 at 17:39
  • 16
    The original Html5Sortable by Ali Farhadi is not actively maintained. The fork by Alexandru Badiu is the better choice. See https://github.com/voidberg/html5sortable. – Nathan Jan 25 '14 at 01:14
  • After sorting how do I get the current order. – briankip Aug 01 '16 at 14:10
  • @briankip in jQuery ... `$('#domId subEl').each(function(){ $(this).text(); });` where `#domId` is the dom wrapper around whatever you're ordering and `subEl` is the class/tagName of the items being ordered. – b_dubb Jan 06 '17 at 19:45
35

Just a friendly update, since this question came up in the search. HTML5Sortable is no longer maintained. The recommended library is Sortable. Size: 12kb minified.

Code:

var sortable = Sortable.create($('#items'));

Hope this help the next wanderer.

ahmohamed
  • 2,851
  • 19
  • 35
11

I found out that this (Nastable) is a little bit more usefull for it has nesting capabilities.

Update Actually ended up using this plugin with more options.

Hope it helps. Cheers!

adrianthedev
  • 576
  • 1
  • 8
  • 19