Restricting dragging by axis, grid, and containment

The dragging behavior can be limited with some configurable constraints.

In this recipe, we will see how to drag an element, either horizontally or vertically, on a grid or inside a certain section of the page.

How to do it…

The next example demonstrates three draggable panels and one draggable image. The first panel can be dragged only horizontally, the second one only vertically, and the third panel is dragged on a grid. Dragging on a grid means the dragging helper snaps to a grid—every specific x and y pixel. The image is placed within an h:panelGroup tag, which acts as a container for dragging. The image cannot go outside this container.

<p:panel id="hpnl" header="Only horizontal draggable panel">
  I can be only dragged horizontally.
</p:panel>
<p:draggable for="hpnl" axis="x"/>

<p:panel id="vpnl" header="Only vertical draggable panel">
  I can be only dragged vertically
</p:panel>
<p:draggable for="vpnl...