ドラッグ アンド ドロップの簡単なコードを作成しました。コードを見てみましょう
<!DOCTYPE html>
<html>
<head>
<title>System Drag and Drop Example</title>
<script type="text/javascript">
{
function dragUser(user,oEvent)
{
oEvent.dataTransfer.setData('User',user.id)
}
function dropUser(target,oEvent)
{
var user= oEvent.dataTransfer.getData('User');
alert(user);
alert(target);
target.appendChild(document.getElementById('user'));
oEvent.returnValue=false;
}
}
</script>
</head>
<body>
<p>Try daragging this text to the red box</p>
<p>
<div style="border: 1px solid black; width: 150px; height: 150px">
<img id="img" src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="dragUser(this,event)">
</div>
<div id="div2" style="background-color: red; width: 100px; height: 100px; clear: both" ondrop="dropUser(this,event)" ondragenter="return false" ondragover="return false">
</div>
</p>
</body>
</html>
問題は、上の div から id="div2" を使用して下の div に画像をドラッグしようとすると、画像がドロップされず、タブで画像として開かれることです。この背後にある理由を教えてください。