Draggable: How to drag and drop into iFrame ?

[Wikiki]

Hi,

I'm trying to create a "builder tool" using this library but I'm facing an issue:

• When I try to drag and element from a div into an iFrame inside an other div a get the following behavior: the drag element only move into the first div and not over the whole document. So when I try to go over the iFrame my first div scroll.

How can I manage this to be able to make my iFrame droppable and receiving the dragged elements ?

regards

[tsov]

Hey @Wikiki , thanks for bringing this up, as it's definitely something we want to have support for!

I could imagine the API to look something like this:

const sortable = new Sortable(insideCurrentFrameContainers);

// waits for iframe to finish loading
iframeElement.addEventListener('load', () => {
  // assumes same origin and finds containers within the iframe
  const iframeContainer = iframeElement.contentDocument.querySelector('.IframeContainer');
  // adds iframe container
  sortable.addContainer(iframeContainer);
  // tells draggable to add listeners to the iframes window too
  sortable.setOptions({hosts: [window, iframeContainer.contentWindow]})
});

Requirement

• iframes are on the same origin

Missing API

• setOptions to change options after initialization (not blocking though)
• hosts option to declare different hosts, e.g. shadow DOM, iframe windows, etc

I'll add it to draggables roadmap, because this could be a common use-case 👍

Let me know what you think of the proposed API

[tsov]

Related issue: https://github.com/Shopify/draggable/issues/153

[kachurun]

@tsov This is the most important feauture for me. Described API looks very cool. I'm looking forward to the implementation. Thank you!

[tsov]

Quick update: https://github.com/Shopify/draggable/pull/202

Got a super dirty & quick version of it ready, but it proves that it's doable. The API as originally proposed has changed though:

new Draggable(containers: HTMLElement[], options: DraggableOptions, hosts: DocumentOrShadowRoot[])

draggable.addHost(host: DocumentOrShadowRoot);
draggable.removeHost(host: DocumentOrShadowRoot);

hosts default would be [document], but can be changed via addHost/removeHost, if not set on instantiation.

The PR that is open at the moment only works for the MouseSensor and Draggable/Sortable, but we will support all Sensors and Plugins.

[Wikiki]

@tsov, thanks for your answer. I'm looking forward for the implementation.

[aloksharma1]

hello was this ever implemented, i require the same for similar uses.

thanks