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

I suggest you go for "LMDD drag and drop" Less than 4kb gzipped and very simple to implement. https://supraniti.github.io/Lean-Mean-Drag-and-Drop/ Simple example:

div id="basic-example"> (scope)
    <div class="grid"> (container)
        <div class="item"></div> (draggable)
    </div>
</div>
<script>
    lmdd.set(document.getElementById('basic-example'), {
        containerClass: 'grid',
        draggableItemClass: 'item'
});
</script>

Answer 2

theres one here http://plugins.jquery.com/project/NestedSortable it doesnt use UI, and is only 5kb(although you could hack any extra functionality to get it down lower if needed)

hope that helps

Andrew

Answer 3

a lot of time since this was asked, so maybe if you are thinking about an alternative to jquery UI this is a really good and easy to implement http://rubaxa.github.io/Sortable/

Answer 4

You can try mine (http://jsfiddle.net/606bs750/16/). Unlimited number of blocks you can drag and sort.

Blocks will constrain to the parent.

<div id="parent" class="parent">
    <button id="button1" class="button">Drag me 1</button>
    <button id="button2" class="button">Drag me 2</button>
    <button id="button3" class="button">Drag me 3</button>
    <button id="button4" class="button">Drag me 4</button>
</div>

JQuery (only):

$(function() {
    $('.button').mousedown(function(e) {
        if(e.which===1) {
            var button = $(this);
            var button_id = button.attr('id');
            var parent_height = button.parent().innerHeight();
            var top = parseInt(button.css('top'));
            var original_ypos = button.position().top; //original ypos
            var drag_min_ypos = 0-original_ypos;
            var drag_max_ypos = parent_height-original_ypos-button.outerHeight();
            var drag_start_ypos = e.clientY;
            var my_ypos = original_ypos;
            //Set current order for all
            $('.button').each(function(i) { $(this).attr('data-order',(i+1)); });
            var prev_button = button.prev('.button'); var next_button = button.next('.button');
            var prev_button_ypos = prev_button.length>0 ? prev_button.position().top : '';
            var next_button_ypos = next_button.length>0 ? next_button.position().top : '';
            $('#log1').text('mousedown '+button_id+' original_ypos: '+original_ypos);
            $('#log2').text('');
            $('#log3').text('');
            $(window).on('mousemove',function(e) {
                //Move and constrain
                button.addClass('drag');
                var direction = my_ypos>button.position().top ? 'up' : 'down';
                var new_top = top+(e.clientY-drag_start_ypos);
                my_ypos = button.position().top;
                button.css({top:new_top+'px'});
                if(new_top<drag_min_ypos) { button.css({top:drag_min_ypos+'px'}); }
                if(new_top>drag_max_ypos) { button.css({top:drag_max_ypos+'px'}); }
                $('#log2').text('mousemove new_top: '+new_top+', my_ypos: '+my_ypos+', direction: '+direction);
                //$('#log3').text('');
                //Check position over others
                if(direction=='down'&&next_button_ypos!='') {
                    if(my_ypos>next_button_ypos) { //crossed next button
                        $('#log3').text('dragged after '+next_button_ypos+' ('+next_button.attr('id')+')');
                        next_button.css({top:(parseInt(next_button.css('top'))-next_button.outerHeight(true))+'px'}); //up once
                        var tmp_order = next_button.attr('data-order');
                        next_button.attr('data-order',button.attr('data-order')); //switch order
                        button.attr('data-order',tmp_order);
                        prev_button = next_button; next_button = next_button.nextAll('.button:not(.drag)').first();
                        prev_button_ypos = prev_button.length>0 ? prev_button.position().top : '';
                        next_button_ypos = next_button.length>0 ? next_button.position().top : '';
                    }
                } else if(direction=='up'&&prev_button_ypos!='') {
                    if(my_ypos<prev_button_ypos) { //crossed prev button
                        $('#log3').text('dragged before '+prev_button_ypos+', '+prev_button.attr('id'));
                        prev_button.css({top:(parseInt(prev_button.css('top'))+prev_button.outerHeight(true))+'px'}); //down once
                        var tmp_order = prev_button.attr('data-order');
                        prev_button.attr('data-order',button.attr('data-order')); //switch order
                        button.attr('data-order',tmp_order);
                        next_button = prev_button; prev_button = prev_button.prevAll('.button:not(.drag)').first();
                        prev_button_ypos = prev_button.length>0 ? prev_button.position().top : '';
                        next_button_ypos = next_button.length>0 ? next_button.position().top : '';
                    }
                }
                $('#log4').text('prev_button_ypos: '+prev_button_ypos+' ('+prev_button.attr('id')+'), next_button_ypos: '+next_button_ypos+' ('+next_button.attr('id')+')');
            });
            $(window).on('mouseup',function(e) {
                 if(e.which===1) {
                    $('.button').removeClass('drag');
                    $(window).off('mouseup mousemove');
                    //Reorder and reposition all
                    $('.button').each(function() {
                        var this_order = parseInt($(this).attr('data-order'));
                        var prev_order = $(this).siblings('.button[data-order="'+(this_order-1)+'"]');
                        if(prev_order.length>0) { $(this).insertAfter(prev_order); }
                    });
                    $('.button').css('top','0'); $('.button').removeAttr('data-order'); //reset
                    $('#log1').text('mouseup');
                    $('#log2').text('');
                    $('#log3').text('');
                    $('#log4').text('');
                 }
            });
        }
    });
});