Question

今天我正在做一些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>

请告诉我这段代码有什么问题

Answer 1

在您的交换机案例中添加中断并选中文本框：

<强> CODE：

<!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

无法删除div中的文本

1 个答案: