On my current project at work I had a crazy problem. For our client we developed a CMS with Vue and Nuxt containing a Live-Editing feature that loads the frontend of a website into an
iFrame. Each page is built with components and I implemented a way to sort those components. This is how the component works:
Everything was tested locally and when we were happy with the results we deployed it on
production. And it didn't work anymore. Here is what we saw:
The strange thing about this was that the exact same component was used in two different locations. First it was used in a sidebar, secondly in a modal. It worked perfectly in the sidebar but was broken in the modal.
I first guessed that I've passed wrong props or something like that. So I started my local machine, opened the modal and tried dragging and dropping some components. Everything worked without problems. Next I tried to make out some problems between local environment and production environment. With Nuxt I could reproduce the behaviour we saw on production when I just changed the
production and run
npm run build && npm run start.
I checked the properties, added console.logs, cleared cache, cleared
.nuxt folder, reinstalled
node_modules, updated packages.. and still couldn't make any difference. I was searching for hours. Until I found the solution and I couldn't believe something like this really exists.
Drag and drop doesn't work when you try to use it on an iFrame that embeds an external URL.
At least this was the case in Chrome 70+ and at the time of testing this I had Chrome 80 installed. It took me 3 hours to find out and it drove me crazy. It's confirmed by this issue here on Sortable.js.
Wait! What? Why didn't I see this in development? Our CMS includes an iFrame and this is pointed to
localhost when you use it in
development. So everything is fine when I run the dev server, because
localhost is no external domain. If I know switch my
production we are pointing this
iFrame to another server where we are hosting the frontend. This happens on my local machine as well and I am now also pointing to an external URL, so the same error happens on my machine as it does on production.
If you are using
Sortable.js you can simply add a
forceFallback: true or in my case when using
vuedraggable you have to add
:force-fallback="true" to your
By quickly going through the source of
Sortable.js I figured out that they are simply falling back from the native drag and drop interface, so if you require that you will probably have to do the same or wait for a bugfix in chrome. 🤷♂️