Drag-Drop disabling not working in Safari/Chrome WebKit Browsers

Question

I have created a Rich Text Editor Web application using document.designMode="on" in an iframe. I want the selection of text to work but want the drag and dropping of text to be disabled. I tried this:

evt.dataTransfer.effectAllowed="none";
evt.dataTransfer.dropEffect = "none";

This works fine in Firefox but it doesn't work in Safari/Chrome WebKit browsers. I have tried to put this in every event: dragover, dragstart, drag, dragenter etc.. but to no avail..putting evt.preventDefault() in mousedown or mouseup addEventListeners disables the selection of text which I don't want .please help...

Answer 1

Ok here I can see the same issue as mine, I've been working on these last month and I just got lucky to solve using using trial and error. I was using Asp.net MVC and Safari and Chrome does not include scripts created on the views that has content place holders mapped in the header of the masterpage if you understand what I mean.

In your scenario you might need to check your javascript if it was successfully invoked by the time that the function was called. Like for example you add a library

make sure that it is on the header and when you try to call a function say for example:

function Drag(){

// Alert to prove that this Drag method was really called

alert("Drag method was called");

}

Using alerts will help you to check if your function was successfully executed although alerts are annoying but if you use it wisely it would surely help you in debugging. And most of the time it is also helpful if you can put all your scripts in the header part although some situations can't be avoided.

This worked for me in my Safari/Chrome javascript issues.

Please vote if it helped you. Thank you!