נא להמתין...

העמוד בטעינה

Sortable lists

are bs list groups enhanced with Sortable js

Getting started

Since super textarea is based on Sortable (big JS) it is not part of the theme and it needs to be included specifically in the page that is using it. To include it, add the following -

-content_for(:head) do
  =javascript_include_tag 'vendor/sortable'

Default behaviour

Sortable list is a regular list group

Simple list

list group item 1

list group item 2

list group item 3

list group item 4

list group item 5

List with handle

list group item 1

list group item 2

list group item 3

list group item 4

list group item 5

.row
  .col-24.col-sm-12.mb-4.mb-sm-0
    %h4 Simple list
    .list-group.list-group-sortable#simpleList
      .list-group-item.cursor-grab list group item 1
      .list-group-item.cursor-grab list group item 2
      .list-group-item.cursor-grab list group item 3
      .list-group-item.cursor-grab list group item 4
      .list-group-item.cursor-grab list group item 5
  .col-24.col-sm-12
    %h4 List with handle
    .list-group.list-group-sortable#listWithHandle
      .list-group-item
        %i.handle.far.fa-bars.cursor-grab
        list group item 1
      .list-group-item
        %i.handle.far.fa-bars.cursor-grab
        list group item 2
      .list-group-item
        %i.handle.far.fa-bars.cursor-grab
        list group item 3
      .list-group-item
        %i.handle.far.fa-bars.cursor-grab
        list group item 4
      .list-group-item
        %i.handle.far.fa-bars.cursor-grab
        list group item 5

:javascript
  // List 1
  $('#simpleList').sortable({
    ghostClass: 'ghost',
    animation: 150,
    chosenClass: "chosen"
  });

  // List 2
  $('#listWithHandle').sortable({
    handle: '.handle',
    ghostClass: 'ghost',
    animation: 150,
    chosenClass: "chosen"
  });

On this page