Question

我的大部分代码来自网站：http://www.w3schools.com/html/html5_draganddrop.asp。

我添加了.css和.html代码的片段。我希望能够将两个.gif图像中的任何一个拖动到“第一个”框中，尽管我无法做到这一点（在CoffeeCup免费HTML编辑器中）。也许我没有正确使用ID？

div.content {
     height:70px;
     width:350px;
     border:1px solid #aaaaaa;
     float:left;
     margin:5px;
     }
     


     div#first:{
      }
      
      div#second:{
       }
       
       div#third{
        }
        
        div#fourth{ 
        }

<!DOCTYPE HTML>
<html>
<head>
<link href="style1.css" rel="stylesheet" type="text/css"/>


<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 class="content" id="first">Block 1</div>
<div class="content" id="second">Block 2</div>
<div class="content" id="third">Block 3</div>
<div class="content" id = "fourth">Block 4</div>

<div id="first" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>

<img id="drag1" src="squig.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<img id="drag2" src="squig2.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">


</body>
</html>

Answer 1

我有两个解决方案，选择你需要的。
1.您需要在HTML代码中使用此功能：

else

您必须删除此行：

<div class="content" id="first" ondrop="drop(event)" ondragover="allowDrop(event)">Block 1</div>
<div class="content" id="second">Block 2</div>
<div class="content" id="third">Block 3</div>
<div class="content" id = "fourth">Block 4</div>

2.另一个解决方案，无需在HTML代码中更改任何内容。

在CSS代码中添加：

<div id="first" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

将.gif拖放到<div>框中

1 个答案: