community.egroupware.org: Community wiki

  
Community wiki
Drag and Drop

Introduction:
The class and it's usage described here is just a simple frontend to Walter Zorns genius framework for DHTML Drag and Drop items. For more info on the framework itself see Walter Zorns Homepage . The class dragdrop.inc.php just cares for the correct creation of the DHTML objects and it's options, plus including all necessary javascript at the right place.

1.  How to create drag and drop items in common:

1.1 create a  dragdrop object:
require_once(EGW_INCLUDE_ROOT . '/phpgwapi/inc/class.dragdrop.inc.php');
$dragdrop = new dragdrop();



1.2 mark items which should be draggable (the items you can move around afterwards)
$dragdrop->addDraggable(name,values,dragAction,dropAction,focus);

Parameters:

name The unique html id of the <div> or <img> element. The name can be called in your actionScripts with "dd.obj.name"
values An optional associative array with keys and values for the object if needed. The values can be called in your actionScripts with "dd.obj.my_<valueKeyName>" 
dragAction

The JavaScript function which is executed while the item gets dragged. Dotted notation: appname.classname.functionname,
e.g. for a script which resists in calendar/js/myscript.js and the function which is called while dragging is mydrag(), the name
is calendar.myscript.mydrag

dropAction The JavaScript function which is executed when item is dropped. Dotted notation: appname.classname.functionname,
e.g. for a script which resists in calendar/js/myscript.js and the function which is called when the ite is drop is mydrop(), the name
is calendar.myscript.mydrop
 focus

an optional string which defines the focus of the draggable object. Possible values are e.g. "top center 2" or "bottom left 10". Default is "center center 0".
The number  is  a value in pixels which defines the padding inside the box
dragdrop focus

You can access your objects "name" and "values" in the ActionScripts as following:
current "draggable" object name:  dd.obj.name;
current "draggable" object value:  dd.obj.my_<valueKeyName>;
current "droppable" object name: var dropTarget = dd.obj.getEltBelow(); dropTarget.name;
current "droppable" object value: var dropTarget = dd.obj.getEltBelow(); dropTarget.my_<valueKeyName>; 

 

1.3 mark items on which we can drop other items, these are the "droppables"
$dragdrop->addDroppable(name,values);

(Parameters as described above)


1.4 let the object generate necessary Javascript
$dragdrop->setJSCode();

DONE

Note: You can do whatever you want in your ActionScripts (!JavaScript or even AJAX) with the given object names and values. For more
information what can be done with the DHTML objects, visit Walter Zorns Homepage.



You are here