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