Proposal: hx-drag hx-drop attributes for more complicated drag-drop interactions

[AjaniBilby]

Currently there is the ability to do some simple drag and drop behaviour as seen in the sorting example. However this relies on information all being contained within one form, and doesn't account for being able to drag and drop elements from completely different parts of the DOM for certain interfaces.

I propose that a new htmx extension should be added which would include the official addition of hx-drag and hx-drop attributes.

• hx-drag is the data added to the request headers when the eventual drop is produced
• hx-drop is the href where the request will be submitted (by default with PUT)
• (optional) hx-drop-method overrides what method the drop request will be sent with.

---

Example Scenario

With just the addition of these two attributes you can make drag-drop based UIs, where each of the PUT requests can simply reply with a HX-Location: (meaning "", i.e. current href) triggering a reload of the page using hx-boost if present.
You could also use an oob update to only replace the changed elements instead of reloading the whole page, but that could get a lot more complex quicky, and leave to a corrupt state in the page.

---

Sample Implementation

<div>
  <div hx-drag="my-data-sent-to-server" draggable>pickup</div>
  <div hx-drop="/drop">drop zone</div>
</div>

function GetTarget(target: EventTarget | null, selector: string) {
  if (target == null) return null;
  if (!(target instanceof Element)) return null;

  target = target.closest(selector);
  if (target == null) return null;
  if (!(target instanceof Element)) return null;

  return target;
}

document.addEventListener("dragstart", (ev) => {
  if (!ev.dataTransfer) return;

  const target = GetTarget(ev.target, "[hx-drag]");
  if (!target) return null;

  const data = target.getAttribute("hx-drag");
  if (!data) return;

  ev.dataTransfer.setData("text/plain", data);
});

document.addEventListener("dragover", (ev) => {
  if (!GetTarget(ev.target, "[hx-drop]")) return;

  ev.preventDefault();
});

document.addEventListener("drop", (ev) => {
  if (!ev.dataTransfer) return;

  const data = ev.dataTransfer?.getData("text/plain");
  if (!data) return;

  const target = GetTarget(ev.target, "[hx-drop]");
  if (!target) return;

  const action = target.getAttribute("hx-drop");
  if (!action) return;

  const method = target.getAttribute("hx-drop-method") || "PUT";

  htmx.ajax(method, action, {
    source: target,
    headers: { "hx-drag": data }
  });
});

---

Since this doesn't rely on anything from htmx other than it being pre-loaded into global scope, technically this does not need to be an official extension, however since it does carve out a part of the available hx- namespace I figured I should ask about it here. Plus maybe someone more experienced than me might have some reason why this could be a bad idea, or how it could be improved.

[Telroshan]

Didn't check the code at all yet, just to let you know that if you are interested, feel free to create a repository of your own to host such an extension, and open a PR on this repo to add it to our community extensions list!
See our extensions contribution guidelines for more details

[AjaniBilby]

I wasn't sure if it's really a good idea, but I've slept on it and expanded my example a lot.
And I'll sleep on it again before I make a PR with examples