With PrimeFaces, we can snap the dragged component to the inner or outer boundaries of another component (a component's DOM element).
In this recipe, we will discuss snapping and its options in detail. As an example, we will develop a big h:panelGroup component as a snap target and three other small h:panelGroup components as draggable components, with various snapping options.
Generally, the snapping behavior is activated by setting the attribute snap to true. The snapping behavior is configurable with two options—snapMode and snapTolerance. The first option, snapMode, determines which edges of snap elements the draggable component will snap to. The second option, snapTolerance, determines a distance in pixels the draggable component must be from the element when snapping is invoked.
<h:panelGroup id="snaptarget" layout="block"
styleClass="ui-widget-content"
style="height:150px;width:450px;">
<p class="ui-widget-header" style="margin:0;padding:5px;">
I'm a snap target to play with me
</p>
<p:draggable/>
</h:panelGroup>
<h:panelGroup id="defsnap" layout="block"
styleClass="dragSnap ui-widget-content">
<p>I'm with default snap and snap to all edges
of other draggable elements</p>
</h:panelGroup>
<p:draggable for="defsnap" snap="true"/>
<h:panelGroup id="outersnap" layout="block"
styleClass="dragSnap ui-widget-content">
<p>I only snap to the outer edges - try with the big box</p>
</h:panelGroup>
<p:draggable for="outersnap" snap="true" snapMode="outer"/>
<h:panelGroup id="innersnap" layout="block"
styleClass="dragSnap ui-widget-content">
<p>I only snap to the inner edges - try with the big box</p>
</h:panelGroup>
<p:draggable for="innersnap" snap="true"
snapMode="inner" snapTolerance="15"/>The following screenshot shows the snapping for the last h:panelGroup tag. The component can be snapped only to the inner edges of the snap target when it is being dragged.
The snapping is enabled by setting snap to true. If the snap attribute is set to false (default), no snapping occurs. The first small h:panelGroup has no snapping options. It snaps to the inner as well as outer boundaries of other draggable components. The second h:panelGroup sets snapMode and can only snap to the outer boundaries. Possible values of snapMode are inner, outer, and both. The third h:panelGroup also has a custom snapTolerance parameter in addition to snapMode, set to inner. This is the distance in pixels from the snap element's edges at which the snapping should occur. The default value is 20 pixels, but we have set it to 15.
Note
In the current PrimeFaces implementation, a draggable component with snap set to true snaps to all other draggable components. This is a little bit different from jQuery's Draggable (http://jqueryui.com/draggable), where we can also specify the elements that the draggable component will snap to when it is close to the edge of such an element.
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application server, such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available at http://localhost:8080/pf-cookbook/views/chapter8/snapping.jsf.