0

ドラッグ アンド ドロップの簡単なコードを作成しました。コードを見てみましょう

<!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 に画像をドラッグしようとすると、画像がドロップされず、タブで画像として開かれることです。この背後にある理由を教えてください。

4

0 に答える 0