Turbo-frame and drag and drop

1

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?

1 Like
2

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.

2 Likes
3

You saved me from hours of custom vanilla JS to work around this limitation… I didn’t see the sortable js lib until this answer. Many thanks!