Drag and drop WORKS. However, deletes email. Can we fix?

So, drag and drop works for me. Google Chrome 76 now supports the drag and drop functionality to our web-app. Everything's great.

Except that it deletes the email I dragged over. This does not happen if I am only dragging the files within the email, only if the email is being dragged over.

Is there any clue as to how to stop the email from being deleted? We're so close to an ideal solution at work and it would be nice to close the lid on this issue once and for all. 

* Please try a lower page number.

* Please enter only numbers.

* Please try a lower page number.

* Please enter only numbers.

Hi,

I solved this issue on my web site with the help of MariusKD (in this post) and the help of the exemples from the following web page :

https://codepen.io/SitePoint/pen/epQPNP

This issue is that, by default, Chrome defines "dropEffect" attribute to "none". 

The web developper of the application have to decide which dropEffect has to be applied when something is dropped in the area :

"copy", "move", or "link"

Please find below the code (jquery) to do a copy (and not a move) when drag and drop into my div "myDropArea" :

$('#myDropArea').on({

'dragenter': function (e) {            

e.originalEvent.dataTransfer.dropEffect = "copy";

e.stopPropagation();

e.preventDefault();

$(this).addClass('draginprogress');

$(this).find('.DragText').css({ 'z-index': '1000' }).show()

},

'dragover': function (e) {

e.originalEvent.dataTransfer.dropEffect = "copy";

e.preventDefault();

e.stopPropagation();

},

'dragleave': function (e) {

e.stopPropagation();

e.preventDefault();            

$(this).removeClass('draginprogress');

$(this).find('.DragText').hide();

},

'drop': function (e) {

var dataTransfer = e.originalEvent.dataTransfer;

$(this).removeClass('draginprogress');

$(this).find('.DragText').hide()

if (dataTransfer && dataTransfer.files.length) {

e.originalEvent.dataTransfer.dropEffect = "copy";

e.preventDefault();

e.stopPropagation();

//My drop action code 

}

}

});

Thanks to MariusKD. I hope this helps.

8 people found this reply helpful

·

Was this reply helpful?

Sorry this didn't help.

Great! Thanks for your feedback.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this reply?

Thanks for your feedback.

* Please try a lower page number.

* Please enter only numbers.

* Please try a lower page number.

* Please enter only numbers.

 
 

Question Info


Last updated December 4, 2020 Views 10,444 Applies to: