Dragging & Resizing

Make elements draggable and resizable

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

Parameter	Type	Description
element	HTMLElement	The element to make draggable
handle	HTMLElement	(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

Event	When
plugin:dragstart	Drag begins
plugin:dragend	Drag 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

Parameter	Type	Description
element	HTMLElement	The 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.