Sigbit Admin Documentation

Nestable

Använder jQuery-pluginet Nestable. http://dbushell.github.io/Nestable/

Både small-action-btn-group och färgkodning med Bootstraps färger (exempelvis .nestable-primary eller .nestable-success-outline) går att använda.

Item 1
Item 2
1. Item 3
2. Item 4
  
  Åtgärder
  Redigera Mer information
  Ta bort
3. Item 5
  1. Item 6
  2. Item 7
  3. Item 8
4. Item 9
5. Item 10
Item 11
Item 12

Exempelkod


  var updateOutput = function() { console.log('UPDATED'); }
  $('#nestable').nestable({
    listNodeName    : 'ol',
    itemNodeName    : 'li',
    rootClass       : 'nestable',
    listClass       : 'nestable-list',
    itemClass       : 'nestable-item',
    dragClass       : 'nestable-dragel',
    handleClass     : 'nestable-handle',
    collapsedClass  : 'nestable-collapsed',
    placeClass      : 'nestable-placeholder',
    noDragClass     : 'nestable-nodrag',
    emptyClass      : 'nestable-empty',
    })
  .on('change', updateOutput);

Bootstrap HTML5 Sortable jQuery Plugin

Bootstrap HTML5 Sortable verkar lite cleanare än Nestable, men saknade funktionaliteten att kunna nesta objekt. Fast det kanske är möjligt här också med lite hack (jag vet inte jag kan inte Javascript å sånt coolt). Vill man inte nesta så känns det som att Bootstrap HTML5 Sortable är mer najs i alla fall.

http://psfpro.github.io/bootstrap-html5sortable

Mvh,
/Antonsson

Sortable List Group

Cras justo odio
Dapibus ac facilisis in
Morbi leo risus
Porta ac consectetur ac
Vestibulum at eros

Exempelkod


    $('.card-sortable').sortable({
      placeholderClass: 'col-sm-6 col-lg-4'
    }).bind('sortupdate', function(e, ui) {
      console.log('updated');
    });

Sortable card grid
Håll nere och dra i objekten för att ändra ordning

Att sortera i grid fungerar dåligt i dagsläget när man ska flytta runt objekt, på grund av positionering och höjden på objekten. Borde gå att lösa, får kolla på det.