I saw an article on HTML5 drag and drop and wondered how hard it would be in XPages.
Demonstration
Here is a link to the working demo of HTML5 drag and drop in an XPage – this is FF and Chrome only as drag/drop is not supported until IE10
How does it work?
I created an XPage and added a simple data table

Going off the text in the article I tried to add the events to the Fruit label column – unfortunately you cannot add custom attributes to an xp:text

So once again – back to using dojo selectors to get what we want.
The HTML generated by the XPage creates all the fruit labels (Oranges, Bananas, Apples) with an id=blah:_1blah ending in “someFruit”
<tr><td class="xspColumn"><span id="view:_id1:_id2:_id31:viewPanel1:0:column3:someFruit" class="xspTextComputedField">Oranges</span></td> <td class="xspColumn"><span id="view:_id1:_id2:_id31:viewPanel1:0:column1:computedField2" class="xspTextComputedField">2.0</span></td> <td class="xspColumn"><span id="view:_id1:_id2:_id31:viewPanel1:0:column2:computedField3" class="xspTextComputedField">4</span></td> </tr> <tr><td class="xspColumn"><span id="view:_id1:_id2:_id31:viewPanel1:1:column3:someFruit" class="xspTextComputedField">Bananas</span></td> <td class="xspColumn"><span id="view:_id1:_id2:_id31:viewPanel1:1:column1:computedField2" class="xspTextComputedField">1.0</span></td> <td class="xspColumn"><span id="view:_id1:_id2:_id31:viewPanel1:1:column2:computedField3" class="xspTextComputedField">2</span></td> </tr>
We can get a handle on these labels using dojo.query(“[id$=someFruit]”) which will get all elements with an id attribute ending in “someFruit”
Once we have all of those elements we can add a draggable and ondragstart attribute to them easily using dojo.attr
dojo.query("[id$=someFruit]").forEach( function(node){ dojo.attr(node, "draggable", "true"); dojo.attr(node, "ondragstart", "dragIt(event);"); });
Update – Thanks to Tim Tripcony for pointing this out
If you are using 8.5.3 you can add the custom attributes to the field in the designer client. This removes the need to use the dojo.query
<xp:text escape="true" id="someFruit" value="#{colname1.Fruit}" style="color:rgb(0,0,255)"> <xp:this.attrs> <xp:attr name="ondragstart" value="dragIt(event);"></xp:attr> <xp:attr name="draggable" value="true"></xp:attr> </xp:this.attrs> </xp:text>
Then we just need somewhere to drop them…
I added the same DIV elements from the example to the XPage
<xp:td> <div id="place1" ondrop="dropIt(event);" ondragover="event.preventDefault();"> </div> </xp:td> <xp:td> <div id="place2" ondrop="dropIt(event, true);" ondragover="event.preventDefault();"> </div> </xp:td>
and added the javascript functions to a scriptblock at the bottom of the page
//function called when drag starts function dragIt(theEvent) { //tell the browser what to drag theEvent.dataTransfer.setData("Text", theEvent.target.id); } //function called when element drops function dropIt(theEvent, keepMe) { //get a reference to the element being dragged var theData = theEvent.dataTransfer.getData("Text"); //get the element var theDraggedElement = document.getElementById(theData); //add it to the drop element if (keepMe){ //Add a clone of the element to the field - rather than move it var newObj=dojo.clone(theDraggedElement) theEvent.target.appendChild(newObj); } else { theEvent.target.appendChild(theDraggedElement); } //Add a new line for visual line up var theBR=document.createElement("br") theEvent.target.appendChild(theBR); //instruct the browser to allow the drop theEvent.preventDefault(); }
I changed the example slightly to add a clone capability rather than just drag and drop

Dragging to the first box “moves” the label

Dragging the label to the second box create a copy of it using dojo.clone(node)
Conclusion
This is merely a prototype but demonstrates nicely the new and exiting capabilities of HTML5 without having the need for a dojo or jQuery library to do the drag/drop for you
Demonstration (again)
Here is a link to the working demo of HTML5 drag and drop in an XPage