1

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...

B. Kemmer
  • 1,517
  • 1
  • 14
  • 32
  • If someone googled for a similar feature, take a look at this [example with `sap.m.Table`](https://openui5nightly.hana.ondemand.com/#/sample/sap.m.sample.TableDnD/preview). DnD is now supported in `ListBase` as of [v1.54](https://github.com/SAP/openui5/commit/85a913571162684284853b79192e7aeba0c3d80a). Since [`sap.m.Tree`](https://openui5nightly.hana.ondemand.com/#/api/sap.m.Tree/overview) extends from `ListBase` (as `sap.m.Table` does), I guess performing DnD between multiple Trees should be possible there as well. – Boghyon Hoffmann Nov 16 '17 at 10:05

1 Answers1

1

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.

B. Kemmer
  • 1,517
  • 1
  • 14
  • 32
  • Your JS Bin example doesn't work for me. Tried with Firefox 42 and latest Windows build of chromium. Any idea? Does it still work for you? – ap0 Dec 04 '15 at 09:43
  • Nope, unfortunately doesn't work in firefox, but in chrome. – B. Kemmer Dec 04 '15 at 10:19