Focus on Microsoft Technologies - Tutorials, Articles, Code Samples.

Tuesday, August 29, 2006

Extending Atlas Drag and Drop

Out of the box Atlas comes with a few drag and drop (DND) behaviors that can be attached to Atlas controls. One of them is the DragDropList behavior which makes it possible to move or copy data from one place to another.

If the built-in behaviors do not fit your needs, there is nothing that stops you from rolling your own. Atlas provides a generic DND API which is designed for extensibility.

At the core of the DND API there is the DragDropManager (DDM). It’s responsible for the actual DND operations. This includes moving the drag visual which represents the data being dragged and notifying drag sources and drop targets about each drag event (movement, valid drops, cancel drag, etc.). Technically, these event notifications are made by calling methods on the relevant drag source and drop targets. This means that all you really need to do to extend the DND API is implement these methods.

Drag Sources
Drag sources are objects that generally expose data which can be moved or copied to somewhere else. They need to implement the IDragSource interface, which is defined as follow:

1 2 3 4 5 6 7 8 
Sys.UI.IDragSource = function() {    this.get_dataType = Function.abstractMethod;    this.get_data = Function.abstractMethod;    this.get_dragMode = Function.abstractMethod;    this.onDragStart = Function.abstractMethod;    this.onDrag = Function.abstractMethod;    this.onDragEnd = Function.abstractMethod;}

The data type can really be anything. If your drag source contains an array of appointments, it might make sense to return 'Appointments' from get_dataType(). The data type is used by the DDM to check in which drop targets the data may be dropped.

When an item is dropped, the DDM will call the drag source’s get_data(context) method to query for the actual data. This data will be passed to the drop target on which the item was dropped.

The other methods are self explanatory. When a user starts dragging, onDragStart is called. While the user is dragging, onDrag is called. Finally, when an item is dropped (in either a valid or invalid location), onDragEnd is called with a parameter specifying whether the drag operation was cancelled.

Generally, a drag source is responsible for initiating a drag operation. It may do so by, for example, handling an element’s click event and calling the startDragDrop(dragSource, dragVisual, context) method on the DDM. It would pass in a reference to itself (the drag source), an element that represents the data that is dragged and a context. The DDM will pass the context onto the get_data() call when an item is dropped, which makes it possible for you to get the right data based on the context.

Drop Targets
A drop target is an object which accepts data from a drag source. There may be multiple drop targets on one page, as long as each implements the IDropTarget interface. It’s defined as follow:

1 2 3 4 5 6 7 8 
Sys.UI.IDropTarget = function() {    this.get_dropTargetElement = Function.abstractMethod;    this.canDrop = Function.abstractMethod;        this.drop = Function.abstractMethod;    this.onDragEnterTarget = Function.abstractMethod;    this.onDragLeaveTarget = Function.abstractMethod;    this.onDragInTarget = Function.abstractMethod;}

The dropTargetElement property should return the DOM element which represents the drop target. It will be used by the DDM to wire the relevant events based on the browser.

A drop target can define what kind of data it accepts by implementing canDrop(dataType). The DDM will pass in the data type of the drag source to this method. If the drop target can only deal with an array of appointments, you probably want to return true only if the passed in dataType argument equals 'Appointment'.

When an item is dropped on a drop target, the DDM will call the drop(dragMode, dataType, data) method. This is the place where you will want to deal with the either movied or copied data. For example, the Atlas DragDropList behavior moves or copies the dropped data to the underlying data source.

Similarly to the IDragSource, the IDropTarget defines a number of methods related to the movement of a drag visual with relation to the drop target. When a drag visual enters the bounds of a potential drop target, onDragEnterTarget is called by the DDM. One of the things you can do here is provide the user with feedback that the item may be dropped now. The reverse goes for onDragLeavetarget. Finally, onDragInTarget is called as long as the user is dragging an item in the drop target. An example implementation of this method includes inserting a HTML element to provide a preview of what would happen if the user would drop the data.

Drop targets are supposed to register themselves with the DDM. They can do this by calling the registerDropTarget(dropTarget) method. Similarly, unregisterDropTarget(dropTarget) should be called by the drop target when it is disposed.

Continuee with Updated Artical from wilcob…

, , , , ,

Post a Comment