gpt4 book ai didi

html - 将 .gif 拖放到
框中

转载 作者:行者123 更新时间:2023-11-28 05:55:21 25 4
gpt4 key购买 nike

我的大部分代码来自网站: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>

最佳答案

我有两个解决方案给你,选择你需要的。
1. 你的 HTML 代码中需要这个:

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

你必须删除这一行:

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

2.另一种解决方案,无需更改您的 HTML 代码中的任何内容。

将此添加到您的 CSS 代码中:

#first {
height:70px;
width:350px;
border:1px solid #aaaaaa;
float:left;
margin:5px;
}

关于html - 将 .gif 拖放到 <div> 框中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37100129/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com