拖放HTML5不起作用

Drag and Drop HTML5 not working?

本文关键字：不起作用 HTML5 拖放      更新时间：2023-09-26

我正在尝试理解html5的拖放，我可以让它拖动并让应该接受拖动元素的元素接受它。但是我无法获得 ondrag 或 ondragenter，或者至少这些事件调用的函数起作用，我不确定我做错了什么。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Week 3 Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="Week3DragAndDropCSS.css">
<script src="Week3DragAndDropJS.js"></script>
</head>
<body>
<header>
    <h1>Week 3 Drag and Drop</h1>
</header>
<div style="height:200px;width:200px;background: red"    
    id="obj1"draggable="true"></div>
<div style="height:200px;width:200px;background:
    green"id="obj2"draggable="true"></div>
<div style="height:200px;width:200px;background: orange" 
    id="obj3"draggable="true"></div>    
<div style="height:200px;width:200px;background-image: url
    ('trash.png');background-repeat: no-repeat;" id="trashCan" 
    ondragover="allowDrop(event)" ondragenter="setBorder(event,'5px')" 
    ondragleave="setBorder(event,'2px')" ondrop="drop(event)"></div>


<footer>
</footer>
    </body>
    </html>

那么这是我的js：

function drag(evt){
evt.dataTransfer.setData("color", ev.target.background);
}
function allowDrop(evt){
evt.preventDefault();
}
function drop(evt){
evt.preventDefault();
var color = evt.dataTransfer.getData("color");
evt.currentTarget.style.background = color; 
}
function setBorder(evt,size){
evt.currentTarget.border = (size +"solid black");
}

小语法错误引用小提琴

function drag(evt){
evt.dataTransfer.setData("color", 
evt.target.style.backgroundColor);
}
function allowDrop(evt){
evt.preventDefault();
}
function drop(evt){
evt.preventDefault();
var color = evt.dataTransfer.getData("color");
evt.currentTarget.style.background = color; 
}
function setBorder(evt,size){
evt.currentTarget.style.border = (size +" solid black");
}
<body>
<header>
    <h1>Week 3 Drag and Drop</h1>
</header>
<div style="height:200px;width:200px;background: red"    
    id="obj1"draggable="true" ondragstart="drag(event)"></div>
<div style="height:200px;width:200px;background:
    green"id="obj2"draggable="true" ondragstart="drag(event)"></div>
<div style="height:200px;width:200px;background: orange" 
    id="obj3"draggable="true" ondragstart="drag(event)"></div>    
<div style="height:200px;width:200px;background-image: url
    ('trash.png');background-repeat: no-repeat;" id="trashCan" 
    ondragover="allowDrop(event)" ondragenter="setBorder(event,'5px')" 
    ondragleave="setBorder(event,'2px')" ondrop="drop(event)"></div>

<footer>
</footer>
    </body>

首先尝试修复错误。 

function drop(evt){ // define parameter evt
    ...
}
function setBorder(evt,size){
    evt.currentTarget.border = (size + "solid black"); // use + to concat
}

这是我从过去的教程中写的内容（它可能类似于您正在学习的教程）：

function drop(evt)
{
  evt.preventDefault();
  var data = evt.dataTransfer.getData("text");
  evt.target.appendChild(document.getElementById(data));
}

我相信您的drop函数缺少的是对appendChild（）的调用，这将是什么实际上将元素从一个地方"拖动"到另一个地方（除了在之前的答案中指出的语法错误）。

相关文章：