Tree Drag and Drop works only once

[joerg_arndt]

Hi Friends,

I have a small problem.

I use the code below to move treenodes.

$(document).ready(function() {

  $(".sapUiTreeList .sapUiTreeNode").draggable({

  drag: function(event) {

  selectedId = event.target.id;

                 },                                   

  });  

  $(".sapUiTreeList .sapUiTreeNode").droppable({

  drop :  function(event){

         var targetId=(this.attributes["data-sap-ui"].value);

         test1(event, selectedId, targetId);

     },

  })

});

But by surprise it works only once. Then I try it the second time, the treenode can not be dragged.

Any clue about this?

Thanks in advance

Rg. Joeg

[saivellanki · Accepted solution]

Hi Joerg,

Instead of using $(document).ready(function(){}); why not use onAfterRendering?

Something like this -

var oTree = new sap.ui.commons.Tree();
oTree.addEventDelegate({
     onAfterRendering: function(oEvent){
     //Draggable Code

     //Droppable Code
}},oTree);

Check this sample: JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

[former_member182862 · Accepted solution]

HI Sai

Do you see that the tree nodes are messed up after drag and drop?

Thanks

-D

[saivellanki · Accepted solution]

Hi Dennis,

Yeah, they are.

Regards,

Sai Vellanki.

[joerg_arndt]

Thanks to all for the efforts.

To Sai, it works like charme by now.

All the best

Rg. Joerg.

[kedarT]

Hi Joerg,

Where is this code placed? in onInit() or onAfterRendering()

[joerg_arndt]

Hi Kedar,

I put it every there.

In Index.html, in init() and in AfterRendering().

Allways the same result.

Even when I insert e new Node, it is  the same. It seems something is gonna initilialised!

Thanks Joerg

[kedarT]

Hope this helps -

[former_member182862]

HI Kedar

IMO, Joerg is having different issues from the article.

Hi Joerg

Do you create the tree by binding node aggregations to a model? If yes, then you have to update the model and then the tree will re-render. It will not work if you update the tree DOM directly (this is what JQuery drag and drop library does. You need to find the node that is been moved and then after drop, figure out the node before/after it. Then update the model. Unfortunately, It can be complex.

-D