Skip to main content

​
api.makeDraggable()

Make any DOM element draggable on the board. 
const box = document.createElement('div');
box.className = 'plugin-box';
api.boardEl.appendChild(box);
api.makeDraggable(box);

​
Signature

api.makeDraggable(element: HTMLElement, handle?: HTMLElement): void
ParameterTypeDescription
elementHTMLElementThe element to make draggable
handleHTMLElement(Optional) A child element to use as the drag handle. If omitted, the element itself is the handle.

​
Behavior

  • Drag handle: the element itself, or the specified handle element
  • Positioning: sets top and left CSS properties
  • z-index: set to Date.now() on drag start (brings to front)
  • Auto-undock: if the element is docked, dragging undocks it automatically
The element must have position: absolute for dragging to work. The plugin-box class includes this automatically, and plugin containers created via api.container are positioned absolutely by default.

​
Events

EventWhen
plugin:dragstartDrag begins
plugin:dragendDrag ends

​
Full Example

export function setup(api) {
  const box = document.createElement('div');
  box.className = 'plugin-box';
  box.style.cssText = `
    left: 200px;
    top: 200px;
    width: 300px;
    padding: 20px;
  `;
  box.innerHTML = '<p>Drag me!</p>';

  api.boardEl.appendChild(box);
  api.makeDraggable(box);

  // Save position after drag
  api.bus.on('plugin:dragend', ({ el }) => {
    if (el === box) {
      api.storage.set('my-plugin-pos', {
        left: parseInt(box.style.left),
        top: parseInt(box.style.top)
      });
    }
  });
}

​
api.makeResizable()

Add a resize handle to any element, allowing the user to resize it by dragging the bottom-right corner. 
const box = document.createElement('div');
api.boardEl.appendChild(box);
api.makeResizable(box);

​
Signature

api.makeResizable(element: HTMLElement): void
ParameterTypeDescription
elementHTMLElementThe element to make resizable

​
Behavior

  • Appends a 14×14px resize handle at the bottom-right corner
  • Cursor changes to nwse-resize on the handle
  • Sets width and height CSS properties on drag
  • The handle does not interfere with the element’s content

​
Full Example

export function setup(api) {
  const box = document.createElement('div');
  box.className = 'plugin-box';
  box.style.cssText = `
    left: 100px;
    top: 100px;
    width: 300px;
    height: 200px;
    padding: 20px;
  `;
  box.innerHTML = '<p>Drag & resize me!</p>';

  api.boardEl.appendChild(box);
  api.makeDraggable(box);
  api.makeResizable(box);
}
Both api.makeDraggable() and api.makeResizable() are automatically called on plugin containers created via api.container.