拖放HTML5无效？
[英]Drag and Drop HTML5 not working?
问题描述
I am trying to understand the drag and drop for html5, I can get it to drag and have the element that is suppose to take the dragged element accept it. 
我正在尝试了解html5的拖放，我可以将其拖放，并让假定的元素接受被拖动的元素。 However I cant get the ondrag or ondragenter, or at least the functions those events call to work I'm not really sure what I'm doing wrong. 但是，我无法获得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>
Then here is my js: 然后这是我的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");
}
3 个解决方案
解决方案1
0 2016-04-20 01:36:48
Try to fix errors first. 尝试先修复错误。
function drop(evt){ // define parameter evt
...
}
function setBorder(evt,size){
evt.currentTarget.border = (size + "solid black"); // use + to concat
}
解决方案2
0 2016-04-20 01:37:13
Here is what I have written from a past tutorial I went through (it was probably similar to the one you're doing to learning about this): 这是我从过去的教程中学到的（可能与您正在学习的教程类似）：
function drop(evt)
{
evt.preventDefault();
var data = evt.dataTransfer.getData("text");
evt.target.appendChild(document.getElementById(data));
}
What I believe is missing from your drop function is a call to appendChild(), which would what be what actually "drags" the element from one place to another (in addition to syntactic errors that were pointed out in a previous answer). 我相信您的drop函数缺少的是对appendChild（）的调用，这实际上是将元素从一个位置“拖动”到另一个位置的功能（除了上一个答案中指出的语法错误）。
解决方案3
0 已采纳 2016-04-20 02:31:46
minor syntax mistakes reffer following fiddle 小提琴语法错误
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.