I have a script which determines the result of drag and drop operation from the value of event.dataTransfer.dropEffect. I set the property event.dataTransfer.effectAllowed to value "copymove". In Firefox the value of dropEffect is "move" by default and "copy" when I press ctrl key during drag. In Chrome, the value of dropEffect is always "none". Does Chrome not suppot this API?

I have a script which determines the result of drag and drop operation from the value of event.dataTransfer.dropEffect. I set the property event.dataTransfer.effectAllowed to value "copymove". In Firefox the value of dropEffect is "move" by default and "copy" when I press ctrl key during drag. In Chrome, the value of dropEffect is always "none". Does Chrome not suppot this API?

• javascript
• google-chrome
• firefox

2 Answers 2

This is a bug in Chrome (and in Internet Explorer). For Chrome there is a bug report: https://bugs.chromium/p/chromium/issues/detail?id=39399

As a solution you must store the content of dropEffect in a global variable while the drag events and use its content instead of event.dataTransfer.dropEffect if that value is "none" in the drop event.

I got a solution for this as it is still not working these years.

Only Firefox seems to update the value of event.dataTransfer.dropEffect automatically.

In all other browsers you will have to do some extra steps (provided in script below) by using keyboard events (event.ctrlKey and event.shiftKey) to capture the status of CTRL and SHIFT keys and update the event.dataTransfer.dropEffect.

Solution

The basic script I attach here, updates the event.dataTransfer.dropEffect and makes things work in Chrome and in Edge as well.

document.addEventListener("dragover", (event) => {
  event.preventDefault();
  var c = event.ctrlKey;
  var s = event.shiftKey;
  var dropEffect = updateDropEffect(c, s);  
  event.dataTransfer.dropEffect = dropEffect;

  document.getElementById("div1").innerHTML = "drag type: " + dropEffect;;

    }, false);


function updateDropEffect(c, s) {
    // control, shift, none behaviors
    if (c && s) { return "link"; }
    if (c) { return "copy" }
    return "move";
  }

<div id="drag1"draggable="true">DRAG THIS TEXT BUT KEEP MOUSE BUTTON PRESSED WHILE PRESSING CTRL + SHIFT KEY 
  <br> You will notice that mouse pointer icon changes, not only in Firefox but also in in Chrome and Edge
  <br><br>
</div>
<div id="div1">*** Look here for status of mouse pointer icon *** </div>