resizable_dock.js

lizMap.events.on({
    uicreated: function (e) {
        var script = document.createElement('script');
        script.src = 'https://cdn.jsdelivr.net/npm/interactjs/dist/interact.min.js';
        script.type = 'text/javascript';
        script.onload = function () {
            // Script has been loaded and can be used now
            console.log('interact.js has been loaded successfully!');

            // Now you can safely use interact
            interact('#dock')
                .resizable({
                    edges: { left: false, right: true, bottom: false, top: false }
                })
                .on('resizemove', function (event) {
                    var target = event.target;
                    var x = (parseFloat(target.getAttribute('data-x')) || 0);
                    var y = (parseFloat(target.getAttribute('data-y')) || 0);

                    // Update the element's style
                    target.style.width = event.rect.width + 'px';
                    target.style.height = event.rect.height + 'px';

                    // Translate when resizing from top or left edges
                    x += event.deltaRect.left;
                    y += event.deltaRect.top;

                    target.style.transform = 'translate(' + x + 'px,' + y + 'px)';

                    target.setAttribute('data-x', x);
                    target.setAttribute('data-y', y);
                });
        };

        document.head.appendChild(script);
    }
});