changes.
| | h2. Overview |
| | | _Since 3.0_ |
| | |
| | The {{<ace:draggable>}} tag gives another component the capability to be dragged. |
| | |
| | {tip}See the ICEfaces Showcase [Live Demo|http://icefaces-showcase.icesoft.org/showcase.jsf?grp=aceMenu&exp=dragDropOverviewBean] of this component, complete with source code.{tip} |
| | |
| | h2. Getting Started |
| | |
| | The component we want to make draggable is specified as the value of the {{for}} attribute. |
| | |
| | {panel} |
| | {code:xml|borderStyle=dashed} |
| | <h:graphicImage id="sampleImage" value="#{bean.imagePath}" /> |
| | |
| | <ace:draggable for="sampleImage" /> |
| | {code} |
| | {panel} |
| | |
| | Alernatively, the {{for}} value can be omitted and the parent component will be made draggable. |
| | |
| | {panel} |
| | {code:xml|borderStyle=dashed} |
| | <h:graphicImage id="sampleImage" value="#{bean.imagePath}"> |
| | <ace:draggable /> |
| | </h:graphicImage> |
| | {code} |
| | {panel} |
| | |
| | h2. Attributes |
| | {tip:title=TagLib Documentation}This section covers attributes involved in the typical use-cases for this component. For reference, the complete taglib documentation for this component is available [here|http://www.icefaces.org/docs/v4_latest/ace/tld/ace/draggable.html].{tip} |
| | {panel} |
| | *for* Id of the component that will have the draggable capabilities. |
| | {panel} |
| | {panel} |
| | *helper* Specifies whether to move the original node or a clone of it. Possible values are 'original' and 'clone' (default is 'original'). |
| | {panel} |
| | {panel} |
| | *opacity* Specifies the opacity for the helper node during dragging. Values can range from 0.00 to 1.00. |
| | {panel} |
| | {panel} |
| | *scope* Keyword of this draggable component. This draggable will only be allowed to be dropped on droppables with the same keyword. |
| | {panel} |
| | {panel} |
| | *axis* Used to restrict the drag movement of this item to an axis. Possible values are 'x', 'y' or null for no restriction (default is null). |
| | {panel} |
| | {panel} |
| | *containment* Id of the parent component whose boundaries should restrict the movement of this draggable. |
| | {panel} |
| | |
| | h2. Event Listeners |
| | | dragStartListener | Method called whenever the draggable component starts to be dragged. The method receives a single DragDropEvent argument. | |
| | |
| | h2. Client Behavior Events |
| | | start | Fired when the draggable component starts to be dragged (default event). | |
| | |
| | h2. JavaScript APIs |
| | |
| | None. |
| | |
| | h2. Keyboard and ARIA support |
| | |
| | At the moment, there is no keyboard and ARIA suppport. |
| | |
| | h2. Known Issues |
| | |
| | When using either of {{dragStartListener}} or the {{start}} ajax event, it is advised not to make significant updates to the component being dragged, since this may cause a dynamic update and replacement of the entire markup of the component in the client. Thus, if the user is still dragging the component, they may lose the handle of it when this update occurs. There is no problem updating components that are inside the component being dragged. There is also no problem updating components that are outside of the component being dragged, as long as they don't cause a full form update if the component being dragged is inside such form. If this scenario should occur, it is very likely that it can be avoided by making certain changes on the facelet. |
| | |
| | h2. Other Resources |
| | |
| | None. |
Draggable