DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Sortable - Customization

This demo illustrates some of the properties that allow you to customize the Sortable component's behavior.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API
  • dropFeedbackMode
    Specifies how to highlight the item's drop position.

  • itemOrientation
    Notifies the Sortable about item layout so that it can properly re-position items or the drop indicator during drag and drop.

  • dragDirection
    Specifies the directions in which an item can be dragged.

  • scrollSpeed
    Specifies the scrolling speed when dragging an item beyond the viewport.

  • scrollSensivity
    Specifies the distance in pixels from the edge of viewport at which scrolling should start.
    The value should not be more than half the Sortable's height or width depending on items' orientation.

  • handle
    Specifies an element that should act as a drag handle for an item. A CSS selector (id or class) is used to reference the element. If not specified, users can drag any part of the item.

  • dragTemplate
    Specifies custom markup to be shown instead of the item being dragged.