JavaScript

I am looking for drag and drop with links like below gif. I have also checked this ::

UI5Object.extend("DraggableDelegate", {
    constructor: function (oControl) {
        this.oControl = oControl;
    },

    onAfterRendering: function () {
        this.oControl.$().draggable({
            cancel: false
        });
    }
});

JavaScript
​x
 
UI5Object.extend("DraggableDelegate", {
    constructor: function (oControl) {
        this.oControl = oControl;
    },
​
    onAfterRendering: function () {
        this.oControl.$().draggable({
            cancel: false
        });
    }
});
​

http://jsbin.com/loqeguridu/edit?html,output but linking the elements is not possible.

Is it possible to have drag and drop with links in SAP UI5 ?

Sample

sampleImage

Answer

I found something useful for the same.SAP UI 5 uses D3.js which has drag and drop features.

<html>

    <head>
        <meta charset="utf-8">
        <title>Directed Graph Editor</title>
        <link rel="stylesheet" href="app.css">
    </head>

    <body></body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="app.js"></script>

</html>

JavaScript
 
<html>
​
    <head>
        <meta charset="utf-8">
        <title>Directed Graph Editor</title>
        <link rel="stylesheet" href="app.css">
    </head>
​
    <body></body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="app.js"></script>
​
</html>
​

http://jsfiddle.net/rco31ofe/2/

SAP UI5 :: drag and drop with links

Advertisement

Answer