Is there way to programmatically drop a panel into a container ?

[samuelchau]

Instead of using the mouse to drag and drop, is there any way to programmatically drop a panel into its dropZone container ?

[Flyer53]

Hi @samuelchau
Sorry for the late answer.
It should be possible with using the regular js methods removeChild() and appendChild().

Assuming you talk about a panel already configured for drag and drop actions I tried the following modified code on the jsPanel docs page https://jspanel.de/#properties/droppableTo and it seems to work.

jsPanel.create({
    id: "p1",
    container: '#two',
    setStatus: 'maximized',
    dragit: {
        drop: {
            dropZones: ['.drop-target'],
            callback: function(panel, target, source) {
                this.content.innerHTML = '<p>#' + target.id + '</p>';
                this.maximize();
                console.log(target, source);
            }
        },
        drag: function() {
            this.content.innerHTML = '<p>#' + this.droppableTo.id + '</p>';
        },
        disableOnMaximized: false
    },
    theme: 'info filledlight'
});

var parent = document.getElementById("two");
var child = document.getElementById("p1");
var throwawayNode = parent.removeChild(child);

document.getElementById("five").appendChild(throwawayNode);

I hope that's a point where you can start ...