Hi Christian, what's about to clean this up a bit, remove application code and try to integrate parts of the features directly to the qooxdoo library?
Sebastian Christian Boulanger schrieb: > Hi everybody, > > I was trying to get the QxTree drag and drop behavior from the Demos to > do positioned inserts and ended up using a different approach ( setting > the borderTop of the DOM element rather than a seperate tree marker > line). Attached is the result includind the CakePHP controller method). > Maybe someone finds this useful. > Live demo as usual at http://m15s08.vlinux.de/bibliograph-0.10/trunk/ > > As now, you have to add all of the drag events to each tree node. > Ideally, only the root should have the events and figure out which node > is being dragged, dropped on and hovered over. But it works this way, > that's all I care for now. > > Cheers, > > Christian > > > ------------------------------------------------------------------------ > > /** > * positioned drag & drop within a QxTree > * > * @author Christian Boulanger > * @license LGPL > * > **/ > > //// code for tree > > /** > * move folder > **/ > tree.moveFolder = function ( vAction, vSource, vTarget, vAddBefore ) > { > var vSourceId = vSource.getUserData("id"); > var vTarget = vTarget ? vTarget : this._currentTarget; > var vParent = vAddBefore ? vAddBefore.getParent().getParent() : > vTarget; > var vParentId = vParent.getUserData("id"); > var vPosition = vAddBefore ? vAddBefore.getParent().indexOf(vAddBefore) > : 9999; > vSource.getTree().getManager().deselectAll(); > > zophe.io.bind({ > url: "folders/move/" + vSourceId + "/" + vParentId + "/" + vPosition, > handler: function(type, response){ > if ( response.search(/OK/) == -1 ) { > alert(response); > } else { > // update tree > if ( vAddBefore ) { > vParent.addBefore( vSource, vAddBefore ); > } else { > vParent.addAtEnd( vSource ); > vParent.open(); > } > tree.unmarkAddBefore(); > QxWidget.flushGlobalQueues(); > } > } > }); > } > > /** > * show target line where to insert the drop data > **/ > tree.markAddBefore = function ( vTarget ) > { > vTarget.getElement().style.borderTop="1px dotted black"; > this.setUserData( "addBefore", vTarget ); > } > > /** > * show target line where to insert the drop data > **/ > tree.unmarkAddBefore = function() > { > var vTarget = this.getUserData("addBefore"); > if ( vTarget) { > vTarget.getElement().style.borderTop=""; > this.setUserData("addBefore",null); > } > } > > /** > * drag move handler > * > **/ > tree.handleDragMove = function(e) > { > tree.unmarkAddBefore(); > > var vSource = e.getData("QxTreeElement"); > > if ( ! vSource ) return; > > var vTarget = e.getTarget(), > vTarget = vTarget.getParent() || vTarget.getContainerObject() || > vTarget, > vChildren = vTarget.getVisibleChildren(), > vEventTop = e.getPageY(), > vChild = null; > > for ( var i=0; i lt vChildren.length; i++ ) { > var vTop = QxDom.getComputedPageBoxTop(vChildren[i].getElement()); > if ((vTop - vEventTop).betweenRange(-4, 4) ) { > var vChild = vChildren[i]; > break; > }; > }; > > if ( vChild ) { > tree.markAddBefore(vChild); > } > }; > > /** > * handler for drag start > **/ > tree.handleDragStart = function(e) > { > e.addData("QxTreeElement", e.getCurrentTarget()); > e.addAction("move"); > e.startDrag(); > }; > > /** > * handler for drop: move folders or references > **/ > tree.handleDragDrop = function(e) > { > e.stopPropagation(); > > var vSource = e.getData("QxTreeElement"), > vTarget = e.getCurrentTarget(); > > if ( vSource ){ > > // move folder > var vAddBefore = tree.getUserData ( "addBefore" ); > tree.moveFolder ( "move", vSource, vTarget, vAddBefore ); > > } > > /** > * ?? > **/ > tree.supportsDrop = function(vDragCache) { > return !vDragCache.sourceWidget.contains(this); > }; > > /** > * drag over handler: underline node label > **/ > tree.handleDragOver = function(e) > { > var l = e.getTarget().getLabelObject(); > l.setStyleProperty("textDecoration", "underline"); > }; > > /** > * drag out handler: remove underlining > **/ > tree.handleDragOut = function(e) > { > var l = e.getTarget().getLabelObject(); > l.removeStyleProperty("textDecoration"); > }; > > /** > * drag end handler > **/ > tree.handleDragEnd = function(e) > { > vLastIndex = null; > tree.unmarkAddBefore(); > }; > > > // initialization > > with ( tree ) { > addEventListener("dragdrop", handleDragDrop); > addEventListener("dragover", handleDragOver); > addEventListener("dragout", handleDragOut); > addEventListener("dragmove", handleDragMove); > setDropDataTypes(["QxTreeElement","QxListViewEntries"]); > setUserData("id",0); > reload(); > } > > /// code for each tree node > > var qx_1 = new QxTreeFolder("eins"); > qx_1.setDropDataTypes(["QxTreeElement"]); > qx_1.supportsDrop = tree.supportsDrop; > qx_1.setUserData("id",49); > qx_1.addEventListener('mousedown',tree.handleMouseDown); > qx_1.addEventListener('dragstart',tree.handleDragStart); > qx_1.addEventListener('dragdrop',tree.handleDragDrop); > qx_1.addEventListener('dragover',tree.handleDragOver); > qx_1.addEventListener('dragout',tree.handleDragOut); > qx_1.addEventListener('dragend',tree.handleDragEnd); > qx_1.addEventListener('dragmove',tree.handleDragMove); > > /// CakePHP server side handler > <?php > > ** > * Controller for folders > **/ > > class FoldersController extends AppController > { > var $name = "Folders"; > var $uses = array ("Folder","Reference"); > var $views = null; > > /** > * moves a folder under a new parent > **/ > function move ( $folderId, $parentId, $position=0 ) > { > // save new parent and position > $data = $this->Folder->findById( $folderId, > array("parent_id","position") ); > $data['Folder']['parent_id'] = $parentId; > $data['Folder']['position'] = $position*2; > $this->Folder->save($data); > > // reorder siblings > $data = $this->Folder->findAll( array('parent_id' => $folderId > ), array("position"),"position"); > $position = 1; > for ($i=0; $i < count($data); $i++) { > $data[$i]['Folder']['position'] = $position; > $position+=2; > } > $this->Folder->save($data); > > $this->_output = "OK"; > return true; > } > > ?> _______________________________________________ Qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
