Cyclone3 XULadmin with drag&drop

Published 2007-04-20 in Development by rfordinal

Roman Fordinál

I think, it's now possible. Cyclone3 XULadmin with drag&drop functionality is available in 1.2 stable version. Implementation is possible (I have successfully created a proof-of-concept), but it opens a question - if we want to include it in 1.2pre3 then the release of 1.2stable will take quite a while to be ready.

Implementation

I have implemented and tested this drag&drop functionality in "Sitemap" tab.

The sitemap binding implements handlers:

<handlers>
  <handler event="draggesture" action="fnc_draggesture(event)"/>
  <handler event="dragover" action="nsDragAndDrop.dragOver(event,boardObserver)"/>
  <handler event="dragdrop" action="fnc_dragdrop(event)"/>
</handlers>

Implementation of dragging start:

<method name="fnc_draggesture">
 <parameter name="event"/>
  <body>
   <![CDATA[
    try
    {
     // sitemapStructure dragging
     var xulNode = document.getAnonymousElementByAttribute(this,'IDanon','sitemapStructure')
     var row = {}, col = {}, obj = {}
     xulNode.treeBoxObject.getCellAt(event.clientX, event.clientY, row, col, obj)
         
     row=row.value
     col=col.value
     obj=obj.value
                       
     if(row>-1)
     {
       if(obj == ''){return}
       if(obj!='twisty')
       {
        var cell_value = xulNode.view.getCellValue(row, col)
        var ID = xulNode.view.getCellValue(row, {id: 'ID'})
                              
        if (ID == '_Trash' || ID == '')
        {
         return
        }
                                
        var textObserver =
        {
         onDragStart: function (evt , transferData, action)
         {
          dragdropobject =
          {
           type : 'a210',
           type_sub : 'page',
           ID: ID
          };
          transferData.data=new TransferData(); 
          transferData.data.addDataForFlavour("text/unicode",ID);
         }
        };
        nsDragAndDrop.startDrag(event,textObserver);
        
       }
       return
      }                       
    }catch(e){alert(e)}
  ]]>
 </body>
</method>

Also, checkout the latest code from subversion repository and test it!

What does it do now?

move pages over structure tree
move pages into trash
move pages from listing into structure tree

I think we can implement this functionality to Content tab (articles, etc...) as the next step.

User Comments

Posted by pdrahos on 2007-04-26 02:34:33

Tested it and it works fine in my OSX FFox.