O'Reilly logo

PrimeFaces Cookbook - Second Edition by Oleg Varaksin, Mert Çalışkan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required