How to use the jsplumb.draggable function in jsplumb

jsPlumb.ready(() => {
            jsPlumb.draggable(document.querySelectorAll('.draggable:not(.jtk-draggable)'), {
                // containment: 'parent',
                drag: (event) => {
                    if (event.pos[0] < 0 || event.pos[1] < 0) {
                        const table = document.getElementById(event.el.id);

                        if (table === null) {
                            return;
                        }

                        if (event.pos[0] < 0) {
                            table.style.left = '0px';
                        }

                        if (event.pos[1] < 0) {
                            table.style.top = '0px';
                        }

self.on('mount', function () {
            $root = $(self.root);

            $root.hide();

            jsp.makeSource(self.root);
            jsp.makeTarget(self.root);

            jsp.draggable(self.root, {
                containment: true,
                snapThreshold: 10,
                grid: [GRID_SIZE, GRID_SIZE],
                filter: ".ui-resizable-handle",
                start: function (params) {



                    var isElementBeingDragged = params.e;
                    if (!isElementBeingDragged) return;


                    self.root.addEventListener('click', function handler(e) {
                        e.stopPropagation();
                        this.removeEventListener('click', handler, true);
                    }, true);