Post date: Jul 26, 2012 10:0:57 PM
Background
The qbo.DragDrop behavior can be used to call server-side methods by simply dragging and dropping elements in a browser. For example, the Logging.ashx page renders a home page including logging Sources and Listeners. One can add a listener to a source simply by dragging a listener (td element), and dropping it on a Source (tr element). This functionality is limited to browsers that support the HTML 5 drag-and-drop specifications.
Adding a Source Listener
Adding a source listener means that QBO 3 logging to a source will be logged to a new listener. A typical example is 'turning on' performance logging by adding an 'AmazonPerformanceLog' listener to the 'Performance' source. Such logging can be verbose, so at the end of troubleshooting or analyzing performance, the power user should then remove the listener from the source.
One can add a source listener via an HTTP GET:
/Application/Logging.ashx/AddSourceListener?Source=Performance&Listener=AmazonPerformanceLog
To enable this via drag and drop, the Logging.ashx/Home method renders a page with a Sources panel and a Listeners panel. Listeners can be dragged, and dropped on sources. Both the Sources and Listeners panels are inside a common div tag; the DragDrop behavior is applied to that div tag.
<div class="row-fluid" data-behavior="DragDrop">
<div id="sources" ...>...</div>
<div id="listeners" ...>...</div>
</div>
One could apply the DragDrop behavior to the entire document body, but this would cause the dragover event to fire needlessly for many tag. By applying the behavior to a tag that is the "nearest" common containing tag, the javascript events that are fired during the course of a drag are minimized.
The Listener elements looks like this (they are located inside the <div id="listeners"/> tag):
<td draggable="true" data-drag="{{ 'selector': '.loggingSource', 'data': {{'Listener':'{@name}'}} }}">
<a onclick="qbo3.behavior.fireEvent(...)">
<xsl:value-of select="@name"/>
</a>
</td>
Items to note:
draggable="true" is an HTML attribute telling the browser to make the element draggable
data-drag="{json}" is used by the qbo.DragDrop behavior
selector: controls what you can drop the element onto (in this case, only on elements with the 'loggingSource' class)
data: part of the data that will be passed to the server-side method (&Listener=AmazonPerformanceLog)
The Source elements look like this:
<tr class="loggingSource" data-drop="{{ 'method': 'AddSourceListener', 'confirm': 'Add {{Listener}} to {{Source}}?', 'data': {{'Source':'{@name}'}} }}">
...
</tr>
Items to note:
class="loggingSource": this corresponds to the 'selector' attribute in the Listener element's data-drag JSON
data-drop="{json}" is used by the qbo.DragDrop behavior
method: name of the method to invoke
confirm: a confirmation dialog to present to the user to make sure they mean to take this action
data: part of the data that will be passed to the server-side method (&Source=Performance)
Other Use Cases
Other use cases might include:
Dragging collection names onto users on a search page
Dragging roles onto a user's Role Membership panel
Dragging a decision step template onto another step to create a dependency
Dragging a phone number onto a dialer control