Reply To: how to create docking layout dynamically using java script and jquery?

[yavordashew]

Hi kaltura,
From the example you have shared from the w3schools.com I have succeded to implement their example with our component.
Once more I have prepared a code snippet for you, which has the functionality of dragging a paragraph tag(this is just for example) into
our component tabs. This is the code snippet to add in your javascript file:
function drag_handler(ev) {
console.log(“Drag Confirmed”);
}
function dragstart_handler(ev) {
console.log(“dragStart Confirmed”);
ev.dataTransfer.setData(“text”, ev.target.id);
}
function drop_handler(ev) {
console.log(“Drop Confirmed”);
ev.preventDefault();
var data = ev.dataTransfer.getData(“text”);
ev.target.appendChild(document.getElementById(data));
}
function dragover_handler(ev) {
console.log(“dragOver Confirmed”);
ev.preventDefault();
}
const dockingLayoutComponent = document.querySelector(‘jqx-docking-layout’);
dockingLayoutComponent.addEventListener(‘stateChange’, function(event){
});
And the code snippet for your HMTL file :
<smart-docking-layout id=”dockingLayout2″ ondrop=”drop_handler(event);” ondragover=”dragover_handler(event);”></smart-docking-layout>
<div>
<p id=”drag1″ draggable=”true” ondrag=”drag_handler(event);” ondragstart=”dragstart_handler(event);”>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/