Created on 09 September 2021
icon_unfollowing
Login to follow
sortable-drag-and-drop

Sortable Drag and Drop

Stable version 1.0.3 (Compatible with OutSystems 11)
Uploaded on 12 Jan by 
sortable-drag-and-drop

Sortable Drag and Drop

Documentation
1.0.2

Options

  • WidgetId: List id that will occur when drag and drop.
  • Extend: Sortable parameters of object type.
  • OnChange: [Event] When item in list changed, can get old and new index.


How its work?

  1. 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.
  2. You need to create a new attribute called Order, or whatever you like, but the type must be Integer.
  3. In demonstration have a example using entities, and way to change order when drag and drop.
  4. 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
  5. 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/


1.0.1

Options

  • WidgetId: List id that will occur when drag and drop.
  • Extend: Sortable parameters of object type.
  • OnChange: [Event] When item in list changed, can get old and new index.


How its work?

  1. 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.
  2. You need to create a new attribute called Order, or whatever you like, but the type must be Integer.
  3. In demonstration have a example using entities, and way to change order when drag and drop.
  4. 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
  5. 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/


1.0.0

Options

  • WidgetId: List id that will occur when drag and drop.
  • Extend: Sortable parameters of object type.
  • OnChange: [Event] When item in list changed, can get old and new index.


How its work?

  1. 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.
  2. You need to create a new attribute called Order, or whatever you like, but the type must be Integer.
  3. In demonstration have a example using entities, and way to change order when drag and drop.

Documentation: https://sortablejs.github.io/Sortable/


Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
Sortable Drag and Drop has no dependencies.