0

今天我正在做一些html5的拖放功能。我遇到的问题是，当我尝试将图像从一个div拖放到另一个div中时，这在Firefox中不起作用。让我们看看下面给出的代码

<!DOCTYPE html>
<html>
<head>
    <title>Setting the Drop area</title>
    <script type="text/javascript">
        function Drop(event)
        {
            var oDiv=document.getElementById("text1");
            oDiv.value+=event.type+"\n";
            switch (event.type)
            {
                case "dragover":
                case "dragleave":
                    event.returnValue=false;
                case "dragenter":
                        event.returnValue=false;
            }
        }
    </script>
</head>
<body>
<h3>Drag the image from one div to another div</h3>
<div id="div1" style="border: 2px solid black; width: 200px; height: 200px; position: relative">
    <img src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="Drop(event)" ondrag="Drop(event)" ondragend="Drop(event)">

</div>
<div id="div2" style="border: 2px solid black; width: 200px; height: 200px; position: relative; display: block; float: right"
        ondragenter="Drop(event)" ondragover="Drop(event)" ondragleave="Drop(event)" ondrop="Drop(event)">

</div>
<div style="border: 1px solid black; position: relative; clear: both">
    <textarea id="text1" rows="20" cols="30"></textarea>
</div>

</body>
</html>

请让我知道这段代码有什么问题

4

1 回答 1

0

将 break 添加到您的 switch case 并检查文本框：

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Setting the Drop area</title>
    <script type="text/javascript">
        function Drop(event)
        {
            var oDiv=document.getElementById("text1");
            oDiv.value+=event.type+"\n";
            switch (event.type)
            {
                case "dragover":
                case "dragleave":
                    event.returnValue=false;
                case "dragenter":
                        event.returnValue=false;
            }
        }
    </script>
</head>
<body>
<h3>Drag the image from one div to another div</h3>
<div id="div1" style="border: 2px solid black; width: 200px; height: 200px; position: relative;float:left;">
    <img src="mine,image,life,quote,words,message-5eb746364548d71d07c86e52e63b7b56_h.jpg" width="100px" height="100px" ondragstart="Drop(event)" ondrag="Drop(event)" alt="5eb746364548d71d07c86e52e63b7b56_h" ondragend="Drop(event)"/>

</div>
<div id="div2" style="border: 2px solid black; width: 200px; height: 200px; position: relative; display: block; float: right"
        ondragenter="Drop(event)" ondragover="Drop(event)" ondragleave="Drop(event)" ondrop="Drop(event)">

</div>
<div style="border: 1px solid black; position: relative; clear: both">
    <textarea id="text1" rows="20" cols="30"></textarea>
</div>

</body>
</html>

FIDDLE

于 2013-08-30T19:14:20.183 回答