jQuery Sortable without jQuery UI

Question

I am in need of \"Sortable Drag & Drop\" functionality and I\'m using jQuery. I can\'t really use jQuery UI, because for this project it would be an overhead (I\'d need to a

Answer 1

Here is another one for future generations: http://johnny.github.com/jquery-sortable/.

It's only dependency is jQuery, has a nice feature set and comes in at 8kb minified.

Answer 2

If you look at the jQuery UI source, jquery.ui.sortable.js is a separate file, which I believe depends only on jquery.ui.core.js, jquery.ui.widget.js and jquery.ui.mouse.js, although I haven't tested this. However, this still weighs in at 36KB minified.

Answer 3

You can build your own JQuery download on jqueryui.com without all the css/theme information. You can also strip out the widgets and effects and just use draggable/droppable.

Comes to about 30KB all in. Still too large?

Answer 4

If you want no frills one then I found this one the best: http://jsfiddle.net/erikdana/Nkykq/3/ upto http://jsfiddle.net/erikdana/Nkykq/6/

very very light and up to the point.

js

$('#box').bind({
    mousedown: function() {
        $(document).mousemove(function(e) {
            $('#box').css({
                top: e.pageY - 10,
                left: e.pageX - 20
            });
        });
    },
    mouseup: function() {
        $(document).unbind(mousedown);
        var box = $('#box').css('top');
        if (box > '100') {
            $('#box').css({width: '100px'});
        };
    }
});

css

div {width:50px;height:50px;background:blue;position:absolute; cursor:move;}
div:focus { cursor:move;}

Answer 5

If you're sure not using a customized, minified and gzipped version jQueryUI which you can maintain and update...

...maybe one of the plugins from the following blog post fits your favor:

"17 jQuery Plugins for Easy and Efficient Reordering and Filtering Page Elements" http://www.tripwiremagazine.com/2010/03/17-jquery-plugins-for-easy-and-efficient-reordering-and-filtering-page-elements.html

examples from the blogpost: "List Reorder" (<10KB) or "Sortable table rows with jQuery – Draggable rows" (<3KB)

Answer 6

For future generations: http://dragsort.codeplex.com/

A demo: http://cleesh.org/example (couldn't find one on the development website).

Minified it comes to 9KB in size.