jQuery UI Sortable Axis Property

jQWidgets jqxSortable is a lightweight jQuery plugin that provides a simple and easy-to-use interface for sorting elements. One of the key features of jqxSortable is the ability to specify the axis on which the sorting takes place.

The axis property specifies the allowed axis of movement for the sortable element. It can be set to x, y, or xy.

Default Value

If the axis property is not set, the sortable element will move horizontally and vertically.

$("#sortable").jqxSortable({
  tolerance: 'intersect',
});

Axis Value: x

If the axis property is set to x, the sortable element will move only along the horizontal axis.

$("#sortable").jqxSortable({
  tolerance: 'intersect',
  axis: 'x'
});

Axis Value: y

If the axis property is set to y, the sortable element will move only along the vertical axis.

$("#sortable").jqxSortable({
  tolerance: 'intersect',
  axis: 'y'
});

Axis Value: xy

If the axis property is set to xy, the sortable element will move along both horizontal and vertical axes.

$("#sortable").jqxSortable({
  tolerance: 'intersect',
  axis: 'xy'
});

Conclusion

In summary, the axis property specifies the allowed axis of movement for the sortable element. Its default value is xy, but it can be set to x or y for a more restricted movement. By using jqxSortable with axis property, you can easily add drag and drop functionality to your web application.