Namespace OWF.DragAndDrop

Defined in: Widget.js.

Namespace Summary
Constructor Attributes	Constructor Name and Description
	OWF.DragAndDrop The OWF.DragAndDrop object manages the drag and drop for an individual widget.

Method Summary
Method Attributes	Method Name and Description
<static>	OWF.DragAndDrop.addDropZoneHandler(cfg) Adds a new drop zone to be managed.
<static>	OWF.DragAndDrop.getDragStartData() Returns data sent when a drag was started
<static>	OWF.DragAndDrop.getDropEnabled() Returns whether the a drop is enabled (this is only true when the mouse is over a drop zone)
<static>	OWF.DragAndDrop.isDragging() Returns whether a drag is in progress
<static>	OWF.DragAndDrop.onDragStart(callback, scope) Executes the callback passed when a drag starts in any widget.
<static>	OWF.DragAndDrop.onDragStop(callback, scope) Executes the callback passed when a drag stops in any widget.
<static>	OWF.DragAndDrop.onDrop(callback, scope) Executes the callback passed when a drop occurs in the widget.
<static>	OWF.DragAndDrop.setDropEnabled(dropEnabled) Toggles the dragIndicator to indicate successful or unsuccessful drop
<static>	OWF.DragAndDrop.setFlashWidgetId(id) Use this method to set flex dom element id, so that drag and drop can be enabled in flex widgets.
<static>	OWF.DragAndDrop.startDrag(cfg) Starts a drag.

Namespace Detail

OWF.DragAndDrop

The OWF.DragAndDrop object manages the drag and drop for an individual widget.

Method Detail

<static> OWF.DragAndDrop.addDropZoneHandler(cfg)

Adds a new drop zone to be managed. The handler function defined in the cfg object will be called when a drop occurs over a dom node which matches the id or the className or is equal to or a child of the dropTarget node

//Example cfg Object
{
	id: 'mygrid-1',
	className: 'mygridClass',
	dropZone: document.getElementById('dropZone'),
	handler: function(msg) {
		//some code here to handle the msg and respond
	}
}

//Example usage of addDropZoneHandler which handles a drop that occurs over an Ext Grid and inserts new data into
//that grid based on the dragged data
OWF.DragAndDrop.addDropZoneHandler({
	//dom node of an Ext grid
	dropZone:grid.getView().scroller.dom,

	//this function is called only when a drop occurs over the grid (i.e. the mouse was released over the grid)
	handler: (function(msg){
	
		var store = grid.getStore();
		var processedSelections = [];
		var errorMsg = null;

		//loop through msg.dragDropData which is an array and check for dupes versus the destination store
		for (var i = 0; i < msg.dragDropData.length; i++) {
			//get data for one possible new record in the dragDropData
			var recData = msg.dragDropData[i];

			//is it already in the dest Ext Store?
			if (store.findExact('id',recData.id) >= 0) {
				//found the record already in the store
			}
			else {
				//add new record based on the dragDropData
				var newRec = new store.recordType(recData);
				//calling an external function to decide whether to add the new rec
				var rs = displayPanel.validateRecordOnAdd(newRec);
				if (rs.success) {
					processedSelections.push(newRec);
				}
				else {
					errorMsg = rs.msg;
				}
			}
		}

		if (errorMsg) {
			Ext.Msg.alert('Error', errorMsg);
		}

		//actually insert into the store which adds it the new recs to the grid
		if (processedSelections.length > 0) {
			store.insert(0, processedSelections);
		}

}).createDelegate(grid)});   //createDelegate is an Ext function which sets the scope of the callback

Parameters:
{Object} cfg: config object see below
{className} cfg.class: class of the dropZone
{String} cfg.id: Id of the dropZone
{Node} cfg.dropZone: HTML node which represents the dropZone
{Function} cfg.handler: function to be called when a drop occurs over the dropZone. A msg object will be passed in

<static> OWF.DragAndDrop.getDragStartData()

Returns data sent when a drag was started

<static> OWF.DragAndDrop.getDropEnabled()

Returns whether the a drop is enabled (this is only true when the mouse is over a drop zone)

<static> OWF.DragAndDrop.isDragging()

Returns whether a drag is in progress

<static> OWF.DragAndDrop.onDragStart(callback, scope)

Executes the callback passed when a drag starts in any widget.

//example callback, highlights an Ext Grid when a drag occurs
OWF.DragAndDrop.onDragStart(function(sender, msg) {
	//get the Ext Grid
	var grid = this.getComponent(this.gridId);

	//check custom dragDropGroup property to see if the drag is meant for this grid
	//if so highlight the grid by adding the ddOver class
	if (grid && msg != null && msg.dragDropGroup == 'users') {
		grid.getView().scroller.addClass('ddOver');
	}
}, this);

Parameters:
{Function} callback: The function to execute as a callback.
{Object} scope: The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

<static> OWF.DragAndDrop.onDragStop(callback, scope)

Executes the callback passed when a drag stops in any widget.


OWF.DragAndDrop.onDragStop(function(sender, msg) {
	// do something here
}, this);

Parameters:
{Function} callback: The function to execute as a callback.
{Object} scope: The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

<static> OWF.DragAndDrop.onDrop(callback, scope)

Executes the callback passed when a drop occurs in the widget. If one has multiple dropZones in a widget it is easier to use addDropZoneHandler


OWF.DragAndDrop.onDrop(function(sender, msg) {
	var data = msg.dragDropData;

	// do something with the data here
}, this);

Parameters:
{Function} callback: The function to execute as a callback.
{Object} scope: The scope (this reference) in which the function is executed. If omitted, defaults to the browser window.

<static> OWF.DragAndDrop.setDropEnabled(dropEnabled)

Toggles the dragIndicator to indicate successful or unsuccessful drop

//attach mouseover callback to a particular area. If the mouse is here allow a drop
cmp.getView().scroller.on('mouseover',function(e,t,o) {
	if (cmp.dragging) {
		OWF.DragAndDrop.setDropEnabled(true);
	}
},this);

//attach a mouse out callback to a particular area. If the mouse leaves disable drop
cmp.getView().scroller.on('mouseout',function(e,t,o) {
	if (cmp.dragging) {
		OWF.DragAndDrop.setDropEnabled(false);
	}
},this);

Parameters:
{Boolean} dropEnabled: true to enable a drop, false to indicate a unsuccessful drop

<static> OWF.DragAndDrop.setFlashWidgetId(id)

Use this method to set flex dom element id, so that drag and drop can be enabled in flex widgets.

Parameters:
{String} id: dom element id of flex widget

<static> OWF.DragAndDrop.startDrag(cfg)

Starts a drag. The config object passed in describes the drag and contains the data to be passed to the drop.

//add handler to text field for dragging
owfdojo.connect(document.getElementById('dragSource'), 'onmousedown', this, function(e) {
	e.preventDefault();
	var data = document.getElementById('InputChannel').value;
	if (data) {
		OWF.DragAndDrop.startDrag({
			dragDropLabel: data,
			dragDropData: data,
			dragZone:  document.getElementById('dragZone'),
			dragDropGroup: 'location'  //extra property to pass along
		});
	}
});

Parameters:
{Object} cfg: config object see below
{String} cfg.dragDropLabel: Name to be used as text for the dragDrop indicator
{Object} cfg.dragDropData: Data to be sent on a successful drag and drop. This property is only sent to the successful recipient of the drag (the dropReceive event). It will not be sent for other events.
{Object} cfg.dragZone: dom node which presents a dragZone which is associated with this drag. This property is only saved and used locally to the widget to identify whether a dragZone is in fact the node as a dropZone. It will not be sent to other events callbacks.
{Object} cfg.*: other custom properties may be specified, these will be passed along to event handlers

Classes

Namespace OWF.DragAndDrop