DragController updated

Thanks to the hard work of Nicolas Zeh the component I did some time ago (draggable controller) has now lot of changes!

  • a new name: DragController
  • drag and drop multiple items at once if multipleSelection is set to true for a component
  • added the following methods to the DragEvent Object:
  • evt.checkType
  • evt.addItem
  • evt.removeItem
  • evt.addAndRemoveItem
  • the methods were renamed to fit Macromedias naming conventions for methods
  • i lowered the addReference restriction that both components have to be UIComponents. Now only the source has to be an UIComponent and the target suffices to be a MovieClip.
  • added a veto method for the “drag_start” event. So user can decide on this Event if he would like to allow dragging of this specific item.
  • added an onDropData method besides the Event handlers. So you can assign this method directly to a defined target component.
  • added flags similar to DragAndDropTree component. These are:
  • DENYDRAGFOLDER (only tree component)
  • DENYDRAGITEM (only tree component, as i makes no sense for other components)
  • DENYDROPINTOITEM (only tree component)
  • DENYDROPINTOFOLDER (only tree component)
  • DENYDROPINTO (only tree component)
  • DENYDROPINBETWEEN this option disallows setting a specific target index position and will add the item at the end of the List, DataGrid, Tree
  • removed some bugs concerning Focus on Component and selectedItems. But i am not sure if there aren’t some left due to Flash’s strange Focus mechanisms. (sure, I still haven’t understood the focus mechnism of MM components)

There’s also a very comprehensive help of the component (just look in the F1 flash help panel)

[attachments size=large docid=768 force_saveas=”1″ logged_users=”0″]

Draggable Controller

After reading all the comments added on the Drag n’ Drop Tree component made some time ago I spent some time to make a small component which is capable to manage drag and drop between almost all the Macromedia builtins component (such as List, DrataGrid, Tree…).
It requires Flash 8 to work because I’m using BitmapData for clone the dragged item (wow, this is incredible easy to do now 🙂 )
You can see a demo here: DraggableController.html
This is the code used in the .fla, in order to manage the component events:

/**
Setting up the list of relationship between components
**/
dc.AddReference(this._datagrid_1, this._list_1)
dc.AddReference(this._datagrid_1, this._datagrid_2)
dc.AddReference(this._datagrid_1, this._tree_1)
dc.AddReference(this._datagrid_1, this._datagrid_1)
dc.AddReference(this._list_1, this._list_2)
dc.AddReference(this._list_1, this._text_ctrl_1)
dc.AddReference(this._text_ctrl_2, this._list_2)
dc.AddReference(this._tree_1, this._list_2)
dc.AddReference(this._tree_1, this._text_ctrl_2)
dc.AddReference(this._tree_1, this._text_area_1)
dc.AddReference(this._list_2, this._text_area_1)
/** drag complete listener **/
dc.addEventListener("drag_complete", this)
/**
evt:
- target_component = drop destination component
- source_component = drag n' drop source component
- source_item      = item dragged
- source_index     = selectedIndex of the source component
- target_item      = drop destination item inside target_component
- target_index     = drop destination index
IMPORTANT: once received evt you must Veto() or Skip() the evt itself.
evt.Skip() will simply remove the dragging movieclip
evt.Veto() will move back the dragging item to its source
*/
function drag_complete(evt:Object):Void{
if(evt.target_component == _list_1){
evt.Veto()
} else if(evt.target_component == _datagrid_2 or evt.target_component == _datagrid_1){
evt.source_component.removeItemAt(evt.source_index)
evt.target_component.addItemAt(evt.target_index, evt.source_item)
Selection.setFocus(null)
evt.target_component.selectRow(evt.target_index, false, false)
evt.Skip()
} else if(evt.target_component == _tree_1){
evt.source_component.removeItemAt(evt.source_index)
var node:XMLNode = new XMLNode(1, "node")
node.attributes.label = evt.source_item.title +  "(Cloned)"
node.attributes.data = evt.source_item
evt.target_item.appendChild(node)
evt.Skip()
} else if(evt.target_component == _text_ctrl_1){
evt.source_component.removeItemAt(evt.source_index)
evt.target_component.text = evt.source_item.label
evt.Skip()
} else if(evt.target_component == _list_2 && evt.source_component == _tree_1){
evt.source_item.removeNode()
evt.source_component.dataProvider = evt.source_component.getDataProvider()
evt.target_component.addItemAt(evt.target_index, evt.source_item.attributes.label)
evt.Skip()
} else if(evt.target_component == _text_area_1 && evt.source_component == _list_2){
evt.source_component.removeItemAt(evt.source_index)
evt.target_component.text = evt.source_item.label
evt.Skip()
} else if(evt.target_component == _text_area_1 && evt.source_component == _tree_1){
evt.source_item.removeNode()
evt.source_component.dataProvider = evt.source_component.getDataProvider()
evt.target_component.text = evt.source_item
evt.Skip()
} else {
evt.Veto()
}
}

The .zip with all the file is available here, if anyone want to test and improve it.

[attachments docid=691 force_saveas=”1″ logged_users=”0″]

Drag and Drop Tree component, yet another!

Yes, this is another drag and drop tree component 🙂
It was a log I wanted to extends the built-in Flash mx 2004 Tree component in order to allow drag and drop operations.. but time was always my enemy.
I was lucky that i need one for work.. i look around and i founded some cool other similar components, but i wanted to be able to do it by myself 😉
It just extends the base Tree component and you can set some drag and drop rules, just costants..
for example, i set these costants to be used:

  • TreeDnd.DEFAULT
  • TreeDnd.DENYALL
  • TreeDnd.DENYDRAGFOLDER
  • TreeDnd.DENYDRAGITEM
  • TreeDnd.DENYDROPFOLDER

they can be used in combinations:
myDnd.dragRules = TreeDnd.DENYDRAGFOLDER | TreeDnd.DENYDROPITEM
in this way you cannot drag a folder, only leaf nodes, and you cannt drop the dragged item into a leaf node, only into a folder or before/after another leaf node…

[kml_flashembed publishmethod=”static” fversion=”10.0.22″ movie=”/wp-content/uploads/2004/12/example.swf” width=”550″ height=”400″ targetclass=”flashmovie”]

Get Adobe Flash player

[/kml_flashembed]
Download the component here.