Behavior: Drag and Drop

posted Jul 26, 2012, 3:00 PM by Eric Patrick   [ updated Oct 14, 2013, 7:38 AM ]

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


Comments