Skip to end of metadata
Go to start of metadata

The prototypes here were used for getting the feedback of other developers, during the first part (design part) of GSOC project. They are all obsolete now, and only kept as a reference example for future students .

See how some component libraries handle drag and drop (not HTML5 though):
PrimeFacesDraggable
PrimeFacesDroppable
RichFacesDnD
ADFDnD
IceFacesDnD

<fx:dragSource>

Extends: ClientBehavior
Attributes:

Name

Required?

Values

Description

action

required

Comma separated set or String[] or Collection<String> of copy, copyLink, copyMove, link, linkMove, move, all.

Allowed DnD drag action from this source

dropTargetTypes

optional

Can be comma separated set or String[] or Collection<String>

With this property, we can specify which types of drop zones we can make DnD from this source

param

optional

EL and literal

Parameter to send to server when drop operation is done.

Notes: 
References:

<fx:dropTarget>

Extends: AjaxBehavior
Attributes:

Name

Required?

Values

Description

actions

required

Comma separated set or String[] or Collection<String> of copy, copyLink, copyMove, link, linkMove, move, all.

Allowed DnD actions.
If action of dragEvent are not one of these, DnD will stop.

dropListener

optional

EL

Listener method to handle DnD operation on server side.

rerender

optional

EL and literal

same with <f:ajax> rerender attribute.

types

optional

Can be comma separated set or String[] or Collection<String>.

Used in conjunction with <fx:dragSource>'s dropTargetTypes attribute. Types of this dropTarget.

acceptMimeTypes

optional

Can be comma separated set or String[] or Collection<String>.

If this is set, only content dropped into this zone with defined mime type will be accepted and sent to server-side drop listener.
HTML5 DnD allows us to drop anything into drop zone[2] : files from desktop, images on some other document[3] , etc. So this property is a filter.
If value is "*", any content dropped into this zone will be accepted. All type info and data of dropped stuff will be sent to dropListener.
For example, if this is true and we dragNdrop some image on any Html page(even not generated by JSF), dropListener will be triggered with the following data:
content-type | value
text/uri-list | http://example.org/someImage.pngText | http://example.org/someImage.pngtext/plain | http://example.org/someImage.pngURL | http://example.org/someImage.png
Another example may be dropping files from your desktop, but what to do with them? We'll have <hx:inputFileUpload> for DnD file uploading. So better not to accept files, or even they're accepted, we'd better not to send their information to server.
Mime type can be something like "text/x-myfaces-html5-dnd-source" for MyFaces generated components.
Default to "text/x-myfaces-html5-dnd-source", thus only MyFaces generated components can be dropped into this zone.

Notes: 
References:

http://www.whatwg.org/specs/web-apps/current-work/multipage/dnd.html#dnd

http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data

http://html5demos.com/drag-anything

http://apirocks.com/html5/html5.html#slide13

https://developer.mozilla.org/En/DragDrop/Drag_and_Drop

https://developer.mozilla.org/En/DragDrop/DataTransfer

https://developer.mozilla.org/En/DragDrop/Recommended_Drag_Types

https://developer.mozilla.org/En/DragDrop/Drag_Operations

<hx:panel>

Extends: <t:div> or something (I don't think a dependency to Tomahawk is good. So, need to rewrite that stuff or copy them, preferably with maven-dependency-plugin)
Attributes:

ondragstart, ondragend, ondragenter, ondragover, ondrop, other DnD behavioral attributes
dragStartStyle, dragStartStyleClass: CSS stuff to set when this component is being dragged
dragOverStyle, dragOverStyleClass: CSS stuff to set when something is dragged onto this component
other stuff that wrapped components don't support (not clear yet!)

Notes: 
  • This is just like <t:div> or <rich:panel>. For example DnD does not work with components that dont support "dragstart" clientbehavior event. That is why <hx:panel> is necessary. We can wrap those components (ie. h:inputText, h:panelGrid) with <hx:panel>.
References:

Usage of prototypes:

usage: <fx:dragSource> with dropTargetType
expected HTML5 code



usage: <fx:dragSource> with event handler chains
expected HTML5 code



usage: <fx:dragSource> within <hx:inputText> (allowed with HTML5, doesn't make sense though)
expected HTML5 code



usage: <fx:dropTarget> with type and rerender
expected HTML5 code



usage: <fx:dropTarget> with handler chaining
expected HTML5 code



usage: <fx:dropTarget> that accepts some specified mime typed content
expected HTML5 code



And here is the script:

Javascript Stuff