ef-resizable-box

Self-contained resizable and draggable bounding box.

An absolutely-positioned box with resize handles on all eight corners and edges, and a draggable body. Unlike ef-transform-handles, ef-resizable-box owns its own bounds state and constrains movement to its offsetParent. Place content inside via the default slot.

<div class="rb-scene">
  <ef-resizable-box class="rb-box">
    <div class="rb-content">Drag me</div>
  </ef-resizable-box>
</div>

<style>
  .rb-scene {
    position: relative;
    width: 100%;
    height: 220px;
    background: #0f172a;
    overflow: hidden;
  }
  .rb-box {
    --ef-resizable-box-border-color: rgba(255,255,255,0.4);
    --ef-resizable-box-handle-color: white;
  }
  .rb-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    cursor: move;
    user-select: none;
  }
</style>

bounds-change fires on every pointer move during drag or resize:

document.querySelector('ef-resizable-box').addEventListener('bounds-change', (e) => {
  const { x, y, w, h } = e.detail.bounds;
});

CSS custom properties:

Property	Description
`--ef-resizable-box-border-color`	Box outline color
`--ef-resizable-box-bg-color`	Box background
`--ef-resizable-box-handle-color`	Resize handle color
`--ef-resizable-box-dragging-border-color`	Outline color while dragging