Options

• Sortable
  • WidgetId: List id that will occur when drag and drop.
  • Extend: Sortable parameters of object type.
  • NonMovableClass: Specifies a CSS class for list items that should not be draggable.
  • OnChange: [Event] When item in list changed, can get old and new index.

• How its work?
  • Minimalist JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery, supports AngularJS and any CSS library, e.g. Bootstrap.
  • You need to create a new attribute called Order, or whatever you like, but the type must be Integer.
  • In demonstration have a example using entities, and way to change order when drag and drop.
  • Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties
  • The jQuery UI Sortable plugin makes selected elements sortable by dragging with the mouse.Note: In order to sort table rows, the tbody must be made sortable, not the table.
  • Theming
  • The sortable widget uses the jQuery UI CSS framework to style its look and feel. If sortable specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:
    • ui-sortable: The sortable element.
    • ui-sortable-handle: The handle of each sortable item, specified using the handle option. By default, each sortable item itself is also the handle.
    • ui-sortable-placeholder: The element used to show the future position of the item currently being sorted.
    • ui-sortable-helper: The element shown while dragging a sortable item. The element actually used depends on the helper option.
    • Documentation: https://sortablejs.github.io/Sortable