Drag-to-Reschedule

Drag event to change its time.

Design review

html

<div class="dragr" style="border-left-color:#A8E6C1;">
  <span class="dragr__handle" draggable="true" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><circle cx="4" cy="3" r="1.3" fill="currentColor"/><circle cx="10" cy="3" r="1.3" fill="currentColor"/><circle cx="4" cy="7" r="1.3" fill="currentColor"/><circle cx="10" cy="7" r="1.3" fill="currentColor"/><circle cx="4" cy="11" r="1.3" fill="currentColor"/><circle cx="10" cy="11" r="1.3" fill="currentColor"/></svg></span>
  <div class="dragr__body">
    <p class="dragr__title">Design review</p>
    <p class="dragr__time"><time datetime="2026-08-18T10:00 am">10:00 am</time></p>
  </div>
  <div class="dragr__keys" role="group" aria-label="Reschedule with keyboard, step 15 min">
    <button type="button" class="dragr__btn" aria-label="Move Design review earlier by 15 min">&larr;</button>
    <button type="button" class="dragr__btn" aria-label="Move Design review later by 15 min">&rarr;</button>
  </div>
</div>
<style>
.dragr { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 380px; padding: 12px 14px; border-radius: 10px; border-left: 4px solid; box-sizing: border-box; display: flex; align-items: center; gap: 10px; box-shadow: 0 4px 14px rgba(36,20,48,.10); }
.dragr__handle { cursor: grab; color: #24143066; flex: none; }
.dragr__body { flex: 1 1 auto; min-width: 0; }
.dragr__title { margin: 0; font-weight: 700; }
.dragr__time { margin: 2px 0 0; font-size: 12px; color: #24143099; font-variant-numeric: tabular-nums; }
.dragr__keys { display: flex; gap: 6px; flex: none; }
.dragr__btn { width: 28px; height: 28px; border-radius: 7px; border: 1.5px solid #24143030; background: #FAF7F2; cursor: pointer; font-size: 14px; }
.dragr__btn:hover { background: #24143010; }
.dragr__btn:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="flex items-center gap-2.5 w-[380px] p-3 rounded-[10px] border-l-4 box-border font-sans text-sm text-[#241430] bg-[#FAF7F2] shadow-[0_4px_14px_rgba(36,20,48,.10)]" style="border-left-color:#A8E6C1">
  <span class="text-[#24143066] flex-none cursor-grab" draggable="true" aria-hidden="true"><svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><circle cx="4" cy="3" r="1.3" fill="currentColor"/><circle cx="10" cy="3" r="1.3" fill="currentColor"/><circle cx="4" cy="7" r="1.3" fill="currentColor"/><circle cx="10" cy="7" r="1.3" fill="currentColor"/><circle cx="4" cy="11" r="1.3" fill="currentColor"/><circle cx="10" cy="11" r="1.3" fill="currentColor"/></svg></span>
  <div class="flex-1 min-w-0">
    <p class="m-0 font-bold">Design review</p>
    <p class="mt-0.5 mb-0 text-xs text-[#241430]/60 tabular-nums"><time datetime="2026-08-18T10:00 am">10:00 am</time></p>
  </div>
  <div class="flex gap-1.5 flex-none" role="group" aria-label="Reschedule with keyboard, step 15 min">
    <button type="button" class="w-7 h-7 rounded-md border-[1.5px] border-[#24143030] bg-[#FAF7F2] cursor-pointer text-sm hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]" aria-label="Move Design review earlier by 15 min">&larr;</button>
    <button type="button" class="w-7 h-7 rounded-md border-[1.5px] border-[#24143030] bg-[#FAF7F2] cursor-pointer text-sm hover:bg-[#24143010] focus-visible:outline focus-visible:outline-2 focus-visible:outline-[#241430]" aria-label="Move Design review later by 15 min">&rarr;</button>
  </div>
</div>

react

export function DragToReschedule({
  eventTitle = "Design review",
  date = "2026-08-18",
  time = "10:00 am",
  step = "15 min",
  accent = "#A8E6C1",
}) {
  const btn = { width: 28, height: 28, borderRadius: 7, border: "1.5px solid #24143030", background: "#FAF7F2", cursor: "pointer", fontSize: 14 };
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 380, padding: "12px 14px", borderRadius: 10, borderLeft: `4px solid ${accent}`, boxSizing: "border-box", display: "flex", alignItems: "center", gap: 10, boxShadow: "0 4px 14px rgba(36,20,48,.10)" }}>
      <span aria-hidden="true" draggable style={{ cursor: "grab", color: "#24143066", flex: "none" }}>
        <svg width="14" height="14" viewBox="0 0 14 14"><circle cx="4" cy="3" r="1.3" fill="currentColor" /><circle cx="10" cy="3" r="1.3" fill="currentColor" /><circle cx="4" cy="7" r="1.3" fill="currentColor" /><circle cx="10" cy="7" r="1.3" fill="currentColor" /><circle cx="4" cy="11" r="1.3" fill="currentColor" /><circle cx="10" cy="11" r="1.3" fill="currentColor" /></svg>
      </span>
      <div style={{ flex: "1 1 auto", minWidth: 0 }}>
        <p style={{ margin: 0, fontWeight: 700 }}>{eventTitle}</p>
        <p style={{ margin: "2px 0 0", fontSize: 12, color: "#24143099", fontVariantNumeric: "tabular-nums" }}><time dateTime={`${date}T${time}`}>{time}</time></p>
      </div>
      <div role="group" aria-label={`Reschedule with keyboard, step ${step}`} style={{ display: "flex", gap: 6, flex: "none" }}>
        <button type="button" style={btn} aria-label={`Move ${eventTitle} earlier by ${step}`}>&larr;</button>
        <button type="button" style={btn} aria-label={`Move ${eventTitle} later by ${step}`}>&rarr;</button>
      </div>
    </div>
  );
}