====== javascript sortable =====

  * [[https://htmlstream.com/]]

  * [[http://sortablejs.github.io/Sortable/]]
  * [[https://github.com/SortableJS/Sortable]]
    * [[https://github.com/SortableJS/jquery-sortablejs]]

  * [[https://htmlstream.com/front-dashboard/documentation/sortablejs.html]]

=== Multiple ===

  * [[https://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items]]
   * [[http://jsfiddle.net/hQnWG/]]

<code javascript>
$("li").click(function() {
    $(this).toggleClass("selected");
});
$("ul").sortable({
    connectWith: "ul",
    start: function(e, info) {
        info.item.siblings(".selected").appendTo(info.item);
    },
    stop: function(e, info) {
        info.item.after(info.item.find("li"))
    }
});
</code>

<code javascript>

 $('.droptrue').on('click', 'li', function () {
    $(this).toggleClass('selected');
 });

 $("ul.droptrue").sortable({
    connectWith: 'ul.droptrue',
    opacity: 0.6,
    revert: true,
    helper: function (e, item) { //create custom helper
        if(!item.hasClass('selected'))
           item.addClass('selected');
        // clone selected items before hiding
        var elements = $('.selected').not('.ui-sortable-placeholder').clone();
        //hide selected items
        item.siblings('.selected').addClass('hidden');
        var helper = $('<ul/>');
        return helper.append(elements);
    },
    start: function (e, ui) {
        var elements = ui.item.siblings('.selected.hidden').not('.ui-sortable-placeholder');
        //store the selected items to item being dragged
        ui.item.data('items', elements);
    },
    receive: function (e, ui) {
        //manually add the selected items before the one actually being dragged
        ui.item.before(ui.item.data('items'));
    },
    stop: function (e, ui) {
        //show the selected items after the operation
        ui.item.siblings('.selected').removeClass('hidden');
        //unselect since the operation is complete
        $('.selected').removeClass('selected');
    },
    update: updatePostOrder
});

</code>

===== Seleccionar todos =====

  * [[https://github.com/SortableJS/Sortable/issues/1488]]

You can now use Sortable.utils.select(element) and Sortable.utils.deselect(element) since latest commit on next-version branch.

<code javascript>

You can now use Sortable.utils.select(element) and Sortable.utils.deselect(element) since latest commit on next-version branch.

</code>

  * [[https://jsbin.com/divefovuja/1/edit?html,css,js,console,output]]

<code javascript>

Sortable.create(list, {
  group: 'shared',
  multiDrag: true,
  selectedClass: "selected",
  animation: 150
});

Sortable.create(list2, {
  group: 'shared',
  multiDrag: true,
  selectedClass: "selected",
  animation: 150
});

$(document).ready(function(){
  $("#select").click(function(){
    $("#list .list-group-item").addClass("selected");
    $("#list .list-group-item").attr("draggable",false);
  }); 
  
   $("#deselect").click(function(){
    $("#list .list-group-item").removeClass("selected");
    $("#list .list-group-item").removeAttr("draggable",);
  }); 
});

</code>

  * [[http://jsfiddle.net/jasondavis/xhmb2ba1/]]

===== Otra libreria ====

knockout

  * [[https://embed.plnkr.co/plunk/4tlw6D]]