Drag some information from a <table> to a div and make it an item of a list-group of twitter bootstrap. Uses jQuery and Underscore

DragNDrop

/// About DragNDrop for....

/// LocalStorage para las operaciones a consolidar
// recuperación del localStorage
aConsolidar = JSON.parse(localStorage.getItem('aConsolidar'));

// si no existe se crea un array sin contenido
if(aConsolidar === null) {
    aConsolidar = [];
} else {
    // .each() para mostrar de forma apropiada los elementos guardados
    _.each(aConsolidar, function(element, index, list) {
        var inputActividad = '<input type="hidden" name="actividad_tipo" value="' + element.actividad_tipo + '" />';
        var input = '<input type="hidden" name="operaciones[]" value="' + element.id + '" />';
        var item = '<li class="list-group-item" data-id="'+ element.id +'">' + element.consecutivo + ' | ' + element.cliente + inputActividad + input + '<button type="button" class="close fui-cross"></button></li>';

        // añadir al stack de operaciones a consolidar
        $('.droppable .message').hide();
        $('.droppable input[type="submit"]').attr('disabled',false);
        $('#ops-consolidar').append(item);  
        // marcar como seleccionada
        $('tr[data-op-id="' + element.id + '"]').toggleClass('op-selected');
    });
}

function consolidarInLocalStorage(object) {
    localStorage.setItem('aConsolidar',JSON.stringify(object));
};//saveInLocalStorage()

function addToConsolidar(item) {
    var seek = _.find(aConsolidar, function(i) { return i.consecutivo == item.consecutivo });

    if(!seek) {
        aConsolidar.push(item);
        consolidarInLocalStorage(aConsolidar);
    }
};//addToConsolidar()

function removeItemFromConsolidar(id) {
    var seek = _.findIndex(aConsolidar,function(i) { return i.id = id });

    if(seek >= 0) {
        aConsolidar.splice(seek,1);
        consolidarInLocalStorage(aConsolidar);
    }
};//removeItemFromConsolidar()

function removeAllConsolidar() {
    aConsolidar = [];
    consolidarInLocalStorage(aConsolidar);
};//removeAllConsolidar()

// array of selected operations
operations = [];

$('.draggable').draggable({
    cursor: 'move',
    containment: 'document',
    helper: 'clone'
});
$('.droppable').droppable({
    drop: handleDropEvent
});

function handleDropEvent(event, ui) {
    var draggable = ui.draggable;
    var consecutivo = draggable.children().first().html();

    if(draggable.data('actividad-id') == 5)
        return false;

    if($.inArray(consecutivo,operations) < 0) {
        var cliente = draggable.children(':eq(2)').html();
        var inputActividad = '<input type="hidden" name="actividad_tipo" value="' + draggable.data('actividad-id') + '" />';
        var input = '<input type="hidden" name="operaciones[]" value="' + draggable.data('op-id') + '" />';
        var item = '<li class="list-group-item" data-id="'+ draggable.data('op-id') +'">' + consecutivo + ' | ' + cliente + inputActividad + input + '<button type="button" class="close fui-cross"></button></li>';

        // añadir al stack de operaciones a consolidar
        $('#ops-consolidar').append(item);  
        $('tr[data-op-id="' + draggable.data('op-id') + '"]').toggleClass('op-selected');
        operations.push(consecutivo); 

        // guardar en localStorage
        addToConsolidar({ id: draggable.data('op-id'), actividad_tipo: draggable.data('actividad-id'), consecutivo: consecutivo, cliente: cliente });

        // activar el submit btn
        $('.droppable input[type="submit"]').attr('disabled',false);
        $('.droppable .message').hide();

        // filtrar por operaciones del mismo tipo
        url = window.location.href;
        if(url.indexOf('?') >= 0) {
            if(url.indexOf('otipo') < 0)
                window.location.href = url + '&otipo=' + draggable.data('actividad-id');
        } else {
            if(url.indexOf('otipo') < 0)
                window.location.href = url + '?otipo=' + draggable.data('actividad-id');
        }

    } else {
        return false;
    }
};

// submit button
$('.droppable input[type="submit"]').on('click',function(e){
    e.preventDefault();
    var hasPermission = $(this).data('permission');

    if(hasPermission != true)
        return false;
    else {
        removeAllConsolidar();
        $('.droppable').find('form').submit();
    }
});

// eliminar un item del droppable area
$('#ops-consolidar').on('click','.close', function(e) {
    e.preventDefault();

    var row = $(this).parent();
    $('tr[data-op-id="' + row.data('id') + '"]').toggleClass('op-selected');
    operations.splice($.inArray(row.data('id'),operations),1);

    $(this).parent().remove();

    removeItemFromConsolidar(row.data('id'));

    if($('#ops-consolidar li').length == 0) {
        url = window.location.href;
        if(url.indexOf('otipo') >= 0){
            url = url.replace(/&?otipo=\d/gi, '' );
            window.location.href = url.replace(/&?pageclosed=\d|&?page=\d/gi, '' );
        }
    }
});

// limpiar de droppable area
$('.droppable .limpiar').on('click', function(e) {
    e.preventDefault();

    removeAllConsolidar();

    url = window.location.href;
    if(url.indexOf('otipo') >= 0){
        url = url.replace(/&?otipo=\d/gi, '' );
        window.location.href = url.replace(/&?pageclosed=\d|&?page=\d/gi, '' );
    }
});