Does Eikon Web App container support HTML5 Drag and Drop?

I'm using Eikon Web SDK and trying to follow the example from
http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop. However, when I published my application to Production, it seems like chromium in Eikon doesn't support this feature. Please confirm whether I am correct or not. //HTML

Drag the W3Schools image into the rectangle:



image //Javascript function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text",
ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); }

Best Answer

  • I think it is because JET also uses Drag and Drop to pass data to another Eikon Desktop object. For more information, please refer to JET.js API Demo App in Eikon. The Drag & Drop sample is in CORE FUNCTIONALITY topic. To make the example from
    http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop work, I have modified it, as shown below. I call JET.dragStart() and transfer the data via a global variable. **HTML**



    Drag the W3Schools image into the rectangle:




    image ---------- **JavaScript** var draggedTarget; window.onload = function () { JET.onLoad(initApp); JET.init({ ID: "JETSample" }); } function initApp() { console.log("Jet is init"); var div1 = document.getElementById("div1"); div1.ondragenter = function (e) { e.preventDefault(); console.log("Div enter"); }; div1.ondragover = function (ev) { ev.preventDefault(); console.log("Div Over"); } div1.ondrop = function (ev) { ev.preventDefault(); console.log("Ondrop"); ev.target.appendChild(document.getElementById(draggedTarget)); } var img = document.getElementById("drag1"); img.ondragstart = function (ev) { draggedTarget =
    ev.target.id; var data = { entities: [{ datasource: "", "RIC": "" }] }; JET.dragStart(data); }; }