B. Kemmer B. Kemmer - 4 months ago 21
jQuery Question

OpenUI5 Drag & Drop from and into a Tree

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

Answer

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.