Drag and drop two elements and execute POST call with InteractJS and Htmx

Question

Disclaimer: This is more an architectual question.

I am trying to build a quite simple UI. I have two lists of elements, all elements in boths lists are of the same type. If I drag one element from the left to the right onto an element of this list, I want to execute a POST call to the backend sending both data-obj-id attribute values along.

I settled on InteractJS and HTMX but its f**** hard to build something like this.

My approach: I need to fire some kind of event to trigger the HTMX POST call. But the event needs to know which elements are being dropped on each other. So I need a custom event (not possible to get the drop event anyway), which contains the ID of the other element.

I tried:

const newEvent = new Event('interactjs:drop-'+draggableElement.getAttribute('data-obj-id'));
document.body.dispatchEvent(newEvent);

<div data-obj-id="{{ my_obj.id }}"
     hx-post="/my-post-call"
     hx-trigger="interactjs:drop-{{ my_obj.id }} from:body">...</div>

But the moment the event contains a number, it's not recognised anymore. I guess I just chose a poor choice of architecture to solve my problem?

Thx!