Limit dragging to axis

[dandv]

In some situations, the UI can be better if the movement of the element is limited to an axis.

Example: http://absolutelysuperlist.avocado.io/ (only vertical dragging)

How Kendo does the API: http://docs.telerik.com/kendo-ui/api/javascript/ui/sortable#configuration-axis

[RubaXa]

Drag'n'Drop API does not support this feature. Any step in this direction would lead to refusal of Native D'n'D to jQuery UI.

[dandv]

Hm... I looked into onDragOver but not sure what can be done there to limit the movement.

Pretty sad that we have to live with this limitation and also #146. Maybe the native Drag&Drop API is not that great.

[RubaXa]

Understand, I know all these the minuses of native DnD. But more pluses, so I chose this solution.

[dandv]

I see. I'm not very familiar with the two APIs. What are the advantages of DnD? More uniform cross-browser support, or touch support? Just curious; thanks.

[roelvanduijnhoven]

This is by no way a complete list; but a simple motivation for me to prefer native HTML DnD.

Advantages:

• Out of the box compatible with multiple frames (eg drag from parent to iframe).
• Better performance on large data sets.

Disdvantages:

• Scroll-wheel not funcional during drag.
• No touch support at all.

[vmspike]

Dragging axis limit can be emulated by ghostClass attribute with appropriate css + removing draggable image/dom_element/clone (see rude example in this comment)

[ilearnio]

I use forceFallback because I don't care about native DnD. Even with that setting it's still not possible to limit the draggable item to axis (or in my case it would be better to bound the drag item within the parent element / list of items). I guess this is a limitation because of the usage of native DnD API, but I don't really get why it's needed in the first place

[Jojoshua]

Good use case for limiting axis shown here https://jqueryui.com/tabs/#sortable. The tabs can be moved only in x-axis to reorder.

[jakes-space]

My $0.02 is that animation should always be meaningful from a UX perspective. Sideward sliding is not.

Setting visibility: hidden on the .sortable-drag element and opacity: 1 on the .sortable-ghost element is a reasonable fallback, but the motion no longer smoothly follows dragging.

There are some fixes in forks (see #1297, for instance), but if you want to stick to official releases, this kludge worked for me on mobile:

<draggable ...>
  <template ...>
    <div class="my-item" @touchmove="onDraggableMove">
      ...
    </div>
  </template>
</draggable>

function onDraggableMove() {
  const dragEl = document.querySelector(".my-item.sortable-drag") as HTMLElement | null;
  if (!dragEl) return;
  dragEl.style.transform = dragEl.style.transform.replace(
    /matrix\(1, 0, 0, 1,([^,]+),([^)]+)\)/,
    "matrix(1, 0, 0, 1, 0, $2)"
  );
}