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

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

Blocks will constrain to the parent.

    Drag me 1
    Drag me 2
    Drag me 3
    Drag me 4

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_topdrag_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_ypos0 ? 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('');
                 }
            });
        }
    });
});