In the following example the input password element prevents any drag operation with Chrome if the password element is focused before the drag. The text "My div text" cannot be dragged into the rectangle, neither by repeat attempts, so Chrome blocks dragging for the user. Clicking manually on a non-draggable area before the drag clears the problem, but the user will not know to do that. In Firefox it always drags ok no matter what. Various js attempts to simulate a non-draggable area mouse click before drag have failed.
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
<script>
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));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div><br>
<div id="divText" draggable="true" ondragstart="drag(event)"><h2>My div text</h2></div><br>
<p><input id="inputBox" type="password" /></p>
<script>document.getElementById("inputBox").focus()</script>
</body>
</html>