Sortable icon indicating copy to clipboard operation
Sortable copied to clipboard

Support old dnd-compatible WebKit

Open derrickb opened this issue 4 years ago • 2 comments

This is going to be a difficult one to provide info/repro for as it pertains to an old WebKit version roughly equivalent to Safari 5. The use case is an Adobe AIR plugin for old (but still very widely used) versions of Adobe apps.

For some added info, Vue 2 works just fine (with a few minor edits to get past syntax errors), and I would be seeking to use Sortable with Vue for this app.

When I run a simple test html with barebones drag-and-drop API, it works, eg:

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData('Text', ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}
...
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<img id="drag1" src="./img_logo.gif" draggable="true" ondragstart="drag(event)">

However if I use Sortable.js (with es5-shim polyfills), dragging does not do anything, and no errors are output to console:

<div id="items">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
</div>
...
var el = document.getElementById('items');
var sortable = Sortable.create(el);

I understand this might be such an obscure issue that it might not get resolved, but if anyone has any hint of an idea as to why raw drag-and-drop would work but Sortable wouldn't, it would help me immensely as it would relieve me of having to write my own library. And if Sortable itself can be updated to address this, even better.

derrickb avatar Jul 07 '21 21:07 derrickb

@derrickb If you could tell me how to set up an environment to test Sortable on that old version of WebKit with the polyfill, I could take a look and try to debug it

owen-m1 avatar Jul 08 '21 18:07 owen-m1

Isn't this what forceFallback mode is for?

rouilj avatar Mar 22 '22 02:03 rouilj