Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drag and drop to reorder HTML lists

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.

like image 700
nornagon Avatar asked Apr 28 '12 08:04

nornagon


People also ask

What is draggable in HTML?

The draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the HTML Drag and Drop API. draggable can have the following values: true : the element can be dragged.

How do you drag and drop in JavaScript?

Introduction to JavaScript Drag and Drop API To drag an image, you simply hold the mouse button down and then move it. To drag the text, you need to highlight some text and drag it in the same way as you would drag an image.


2 Answers

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

like image 100
Farhadi Avatar answered Sep 20 '22 17:09

Farhadi


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.

like image 29
ahmohamed Avatar answered Sep 17 '22 17:09

ahmohamed