我使用原生HTML5拖放进行基本的拖放操作。我想知道如何使可拖动的div不可丢弃，这意味着目前其他可拖动的div可以放入其中。
以下是该页面的位置：http://www.ritechhub.umn.edu/interactions/see/drag/sourcesofhealthinfo.html
这是我的代码：
<!doctype HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sources of Health Information</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript">
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));
var temp1 = ev.target.id; //this is the variable that displays the ID of the "dropped" area
//data is the ID of the item "being dropped" or the "draggable"
if (temp1 == "div1") {
if (data == "c" || data == "f" || data == "i" || data == "j" || data == "l" || data == "n" || data == "s" || data == "u" || data == "w") {
document.getElementById(data).style.color = "#007A00";
document.getElementById(data).style.fontWeight = "900";
document.getElementById(data).style.textDecoration = "none";
} else {
document.getElementById(data).style.color = "red";
document.getElementById(data).style.textDecoration = "line-through";
}
}
if (temp1 == "div2") {
if (data == "b" || data == "g" || data == "o" || data == "q" || data == "r") {
document.getElementById(data).style.color = "#007A00";
document.getElementById(data).style.fontWeight = "900";
document.getElementById(data).style.textDecoration = "none";
} else {
document.getElementById(data).style.color = "red";
document.getElementById(data).style.textDecoration = "line-through";
}
}
if (temp1 == "div3") {
if (data == "a" || data == "d" || data == "e" || data == "h" || data == "k" || data == "m" || data == "p" || data == "t" || data == "v" ) {
document.getElementById(data).style.color = "#007A00";
document.getElementById(data).style.fontWeight = "900";
document.getElementById(data).style.textDecoration = "none";
} else {
document.getElementById(data).style.color = "red";
document.getElementById(data).style.textDecoration = "line-through";
}
}
}
</script>
<noscript><noscript>
<p>This page requires javascript. Please enable javascript and reload. If you are using a screen reader, <a href="" target="_blank" alt="Download the contents of this page (PDF)" title="Download the contents of this page (PDF)" >please download this PDF file</a> to access the content on this page. We apologize for any inconvenience. </p>
</noscript>
</noscript>
</head>
<body>
<div id="main">
<div id="instructions">
<h1>Sources of Health Information<a href="#accessible" alt="For learners using a screen reader" title="For learners using a screen reader">*</a></h1>
<p>Match the characteristics and examples with the most appropriate type of source of information.<br>Correctly placed items will turn green and appear <strong>bold</strong>. Incorrect items will appear red and be <span style="text-decoration:line-through"">crossed out.</span></p>
</div>
<div id="words">
<div id="a" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Condensed into brief, easy-to-read format for general public (tertiary)</div>
<div id="b" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Textbooks (secondary)</div>
<div id="c" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Peer-reviewed before publication (primary)</div>
<div id="d" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">The least reliable source of information (tertiary)</div>
<div id="e" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Magazines (tertiary)</div>
<div id="f" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Provides a discussion and conclusion from research findings (primary)</div>
<div id="g" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Summarizes information from primary literature (secondary)</div>
<div id="h" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">YouTube (tertiary)</div>
<div id="i" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Original research (primary)</div>
<div id="j" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">The most reliable source of information (primary)</div>
<div id="k" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">News sources (tertiary)</div>
<div id="l" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">First-hand research (primary)</div>
<div id="m" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Allows for the most potential for error or misinterpretation (tertiary)</div>
<div id="n" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Tabulated sets of data (primary)</div>
<div id="o" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">An interpretation of existing research is provided (secondary)</div>
<div id="p" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Often, only general conclusions of research are discussed (tertiary)</div>
<div id="q" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Reorganizes information from primary literature (secondary)</div>
<div id="r" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Review articles (secondary)</div>
<div id="s" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Conference papers (primary)</div>
<div id="t" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">The most commonly encountered source of information for most people (tertiary)</div>
<div id="u" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Technical reports (primary)</div>
<div id="v" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Wikipedia (tertiary)</div>
<div id="w" class="singleword" draggable="true" ondragstart="drag(event)" aria-grabbed="true">Contains a methods section (primary)</div>
</div>
<div class="threes">
<h2>PRIMARY</h2>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)" aria-dropeffect="move"></div>
</div>
<div class="threes">
<h2>SECONDARY</h2>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)" aria-dropeffect="move"></div>
</div>
<div class="threes">
<h2>TERTIARY</h2>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)" aria-dropeffect="move"></div>
</div>
<div class="clear"></div>
<div id="accessible">*If you are using a screen reader, <a href="" target="_blank" alt="Download the contents of this page (PDF)" title="Download the contents of this page (PDF)" >please download this PDF file</a> to access the content on this page. We apologize for any inconvenience. </div>
</div>
<div class="clear"></div>
<div id="mobile">
Greetings! If you're seeing this message, you are accessing this page on a mobile phone or your screen is too small. Please use a laptop or desktop or increase the size of your screen.
</div>
</body>
</html>
SADF
答案 0 :(得分：1)
请勿附加到event.target，event.target将是您放弃元素的元素，并且不会始终是您附加事件的元素。由于您使用内联js传递this，它将引用div1，div2等元素到您的事件回调
<div id="div1" ondrop="drop(event,this)"></div>
然后让你的回调如此
function drop(ev,ele) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ele.appendChild(document.getElementById(data));
var temp1 = ele.id;
//...
}