Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

apex tree drag and drop - getting the node id of the target

Diana GilbertJul 24 2024

hello and thank you in advance

After reading almost all written about the tree i need some help in getting the node id of the target ,I mean when drag a leaf from one position and set in place of other leaf I need to get the node id of this leaf in order to send to DB and update order.

My code is

function(options) {
// example of tree region drag and drop. It is not possible to do this without using undocumented APIs
function traverse( n ) {
if ( n.children ) {
for ( let i = 0; i < n.children.length; i++ ) {
traverse( n.children[i] );
}
} else {
// could get specific about which nodes are allowed to have children
// here assume they all can
n.children = [];
}
}

//options.doubleClick = "toggle"; // optional
// set options for selection and drag and drop
options.multiple = true;
//options.nodeSelector = true;
options.dragAndDrop = true;
options.dragMultiple = false;
options.dragReorder = true;
options.dragCursor = "move";
options.dragOpacity = 0.6;
options.dragCursorAt = { left: 20, bottom: -20 };
options.scope = "sources";

// updating the UI but persisting the move should be done at the adapter/model layer
options.moved = function(event,ui) {console.log('moved:',ui); }
options.beforeStop = function(event,ui) { console.log('beforeStop:',ui);}
options.stop = function(event,ui) { console.log('stop:',ui);

options.makeNodeAdapter = function( data, types, hasIdentity) {  
   //let myAdapter = $.apex.treeView.makeDefaultNodeAdapter( data, types, hasIdentity );  
   adapter= $.apex.treeView.makeDefaultNodeAdapter( data, types, hasIdentity );

   adapter.types.default.operations = {  
       canAdd: true, // moving and copying may involve adding nodes to new parent  
       canDrag: true,  
       canDelete: true,   
       drag: { normal: "move", ctrl: "copy" } // this is typical hold Ctrl to copy drag: { normal: "move", ctrl: "copy" },  
      // drag: {normal: "move"} // but if you intend to always copy do this  
   };  
   return adapter;  

};
return options;
}

and all the work I do in other DA (adapter is defined as gloal variable

let evt = this.browserEvent;
curMouseButtonReleasedNode = evt.target.textContent;
if (curMouseButtonReleasedNode){
var releasedClicked = evt.target.getAttribute("href");
if (releasedClicked!==null){
releasedClicked = releasedClicked.replace(')','');
releasedClicked = releasedClicked.replace(';','');
var fields = releasedClicked.split(',');
var part1 = fields[0];
var releasedClickedNodeId = fields[1];
releasedClickedNodeId = releasedClickedNodeId.replace(/'/g,'').trim();
}

   if(releasedClickedNodeId){  
       adapter.validateMove = function( pParent, pNodes, pIndex, pCallback) {    
               var myarr = Object.values(pNodes)\[0\];  
               console.log("nodes moved DA droped",myarr); //Object.getOwnPropertyNames(parent));  
            if (myarr){  
               testobj = myarr;  
               console.log( testobj.id + ' '+ testobj.\_parent.id);  
               pCallback(true);  
            }else{  
                pCallback(false);  
            }  
       // return adapter;

           if (releasedClickedNodeId != testobj.id){  
               console.log('x01 '+ testobj.id + ' x02:' + testobj.\_parent.id + 'x03: '+ releasedClickedNodeId.replace("'",''));  
           apex.server.process('reorder\_tree',  
                               {x01: testobj.id,   
                               x02: testobj.\_parent.id,  
                               x03: releasedClickedNodeId  
                               },  
                               {dataType: 'text',   
                               success: function(data){  
                                   console.log(' data is ' + data);  
                                       if (data.trim()=='OK'){  
                                           console.log(' data is '+ data);  
                                           apex.region('SCREEN\_TREE').refresh();  
                                       }else if (data.trim()!=='OK'){  
                                          // if (data.trim()){  
                                               apex.message.alert(data);  
                                               apex.region('SCREEN\_TREE').refresh();  
                                         //  }  
                                             
                                       }  
                                   }  
                               });     
           } // end if releasedClickedNodeId != testobj.id  
   } //adapter.validateMove   
   }  // end releasedClickedNodeId  

} // end curMouseButtonReleasedNode

I think must be possible to get the target from the actions of the adapter but i don't know how

This code work for me for the first drag an drop, after this I get error

desktop_all.min.js?v=22.2.11:5 Error in drop move action.

TypeError: Cannot read properties of undefined (reading 'children')

Again thank you for any help

Comments
Post Details
Added on Jul 24 2024
5 comments
469 views