Sortable is a user interface utility that allows a UI component's items to be reordered via drag and drop gestures.
import DxSortable from "devextreme-vue/sortable"
This section describes properties that configure Sortable UI component content, behavior, and appearance.
Name Description allowDropInsideItemAllows a user to drop an item inside another item.
allowReorderingAllows a user to reorder sortable items.
autoScrollEnables automatic scrolling while dragging an item beyond the viewport.
boundarySpecifies a DOM element that limits the dragging area.
containerSpecifies a custom container in which the draggable item should be rendered.
cursorOffsetSpecifies the cursor offset from the dragged item.
dataA container for custom data.
dragComponentAn alias for the dragTemplate property specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.
dragDirectionSpecifies the directions in which an item can be dragged.
dragRenderAn alias for the dragTemplate property specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.
dragTemplateSpecifies custom markup to be shown instead of the item being dragged.
dropFeedbackModeSpecifies how to highlight the item's drop position.
elementAttrSpecifies the global attributes to be attached to the UI component's container element.
filterSpecifies a CSS selector for the items that can be dragged.
groupAllows you to group several UI components, so that users can drag and drop items between them.
handleSpecifies a CSS selector (ID or class) that should act as the drag handle(s) for the item(s).
heightSpecifies the UI component's height.
itemOrientationNotifies the UI component of the items' orientation.
moveItemOnDropMoves an element in the HTML markup when it is dropped.
onAddA function that is called when a new item is added.
onDisposingA function that is executed before the UI component is disposed of.
onDragChangeA function that is called when the dragged item's position in the list is changed.
onDragEndA function that is called when the drag gesture is finished.
onDragMoveA function that is called every time a draggable item is moved.
onDragStartA function that is called when a drag gesture is initialized.
onInitializedA function used in JavaScript frameworks to save the UI component instance.
onOptionChangedA function that is executed after a UI component property is changed.
onRemoveA function that is called when a draggable item is removed.
onReorderA function that is called when the draggable items are reordered.
rtlEnabledSwitches the UI component to a right-to-left representation.
scrollSensitivitySpecifies the distance in pixels from the edge of viewport at which scrolling should start. Applies only if autoScroll is true.
scrollSpeedSpecifies the scrolling speed when dragging an item beyond the viewport. Applies only if autoScroll is true.
widthSpecifies the UI component's width.
This section describes methods that control the Sortable UI component.
This section describes events raised by the Sortable UI component.
Name Description addRaised when a new item is added.
disposingRaised before the UI component is disposed of.
dragChangeRaised when the dragged item's position in the list is changed.
dragEndRaised when drag gesture is finished.
dragMoveRaised every time a draggable item is moved.
dragStartRaised when drag gesture is initialized.
initializedRaised only once, after the UI component is initialized.
optionChangedRaised after a UI component property is changed.
removeRaised when a draggable item is removed.
reorderRaised when the draggable items are reordered.
Feel free to share topic-related thoughts here.RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4