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 on 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 pixels. The image is placed within an h:panelGroup tag, which acts as a container for dragging. The image cannot go outside of this container.
<p:panel id="hpnl" header="Only horizontal draggable ...
Get PrimeFaces Cookbook now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
