CODEWITHSUNDEEP
javascriptjquerytreesapui5
B. Kemmer
B. Kemmer

Reputation: 1537

OpenUI5 Drag & Drop from and into a Tree

EDIT:
This Question is outdated.

If someone googled for a similar feature, take a look at this example with sap.m.Table. DnD is now supported in ListBase as of v1.54. Since sap.m.Tree extends from ListBase (as sap.m.Table does), I guess performing DnD between multiple Trees should be possible there as well.

(As boghyon has commented)

i am trying to Drag & Drop Items from an OpenUI5-Tree into another Tree.
Use-Case:
The User should be able to choose a TreeItem and Drop it into the Middle of the Screen (into another Tree). In that Tree the User should be able to sort the choosen Items per Drag & Drop.

My Problem is that i can only Drag things, but i can't drop them into the Tree. I made the Tree droppable, but it doesn't work.

Here you have a little Example:
JsBin Example
I am trying to drag and drop items into the right Table.

I am using Google Chrome version 41. Unfortunately i can't drag items with Firefox. I don't know why...

Upvotes: 1

Views: 2915

Answers (1)

B. Kemmer
B. Kemmer

Reputation: 1537

After about 3 hours, i got the solution.
Here you have a sample:
JS-Bin Solution

I had to use jquery events like that: 

$("#" + sap.ui.getCore().byId("middleTree").getId()).on("drop", function(event) {
            event.preventDefault();  
            event.stopPropagation();
            alert("Dropped!");
    });

$("#" + sap.ui.getCore().byId("middleTree").getId()).on("dragover", function(event) {
            event.preventDefault();  
            event.stopPropagation();
            $(this).addClass('dragging');
    });

$("#" + sap.ui.getCore().byId("middleTree").getId()).on("dragleave", function(event) {
            event.preventDefault();  
            event.stopPropagation();
            $(this).removeClass('dragging');
    });

EDIT:
While it is better to use SAP/OPEN UI5s method attachBrowserEvent i can't actually use it with a Tree, because it doesn't extend Control sap.ui.core.Control.

Upvotes: 1

Related Questions