Hotwire Discussion

Turbo-frame and drag and drop

Hi guys,

I’m working on a list of turbo-frame objects in combination with drag and drop. The turbo drive response must be encapsulated with a turbo-frame element. When I want to combine this with drag and drop functions, the draggable element has to hold the draggable attribute. Problem is that turbo-frame is a custom element that doesn’t support the draggable attribute.

not working because the draggable attribute isn’t handled by the browser:

<div id="list">
  <turbo-frame id="blah123" draggable="true">
    <!-- content here -->
  </turbo-frame>
</div>

The snippet below works for drag and drop, but not for new elements added to the list via Turbo. Because the turbo drive call only adds the turbo-frame part to the DOM.

<div id="list">
  <turbo-frame id="blah122">
    <!-- new added element via Turbo and missing the wrapper div with draggable attribute -->
  </turbo-frame>
  </turbo-frame>
  <div draggable="true">
    <turbo-frame id="blah123">
      <!-- content here -->
    </turbo-frame>
  </div>
  <div draggable="true">
    <turbo-frame id="blah124">
      <!-- content here -->
    </turbo-frame>
  </div>
</div>

Also, deleting these objects from the DOM via Turbo will leave the document with empty draggable wrappers…

Someone here who knows how to solve this?

For anyone else who runs into this…

Got it working by removing my Javascript HTML5 implementation and using the Sortable JS library with the option forceFallback: true. This forces the fallback implementation to kick in.