原生HTML5拖放:使可拖动对象不可拖放
Native HTML5 Drag and Drop: Make draggable object NOT droppable
我有一个基本的拖放，使用本机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>
萨德夫
不要追加到 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;
//...
}
相关文章：
- html5拖放确定拖动项目的来源
- 拖放区中可拖动的 Jqueryui 不会滚动，会恢复，滚动条存在
- 拖放无法识别动画CC中拖动对象的子对象
- 拖放与拖动不同的元素
- 拖动的角度拖放 css 类
- 缩放/动画 jQuery 拖放到可拖放时可拖动
- Ember.js可拖动和可拖放的jqueryUI / native Drag and drop mixin
- 在 raphael js 中缩放/拖动矩形
- 拖放后，如果不重新调整大小并在可放置区域中拖动图像
- 是否可以使用 JavaScript 在 WebBrowser 中拖动 WPF 元素和句柄拖放
- 在拖动/拖放事件上获取 Firefox 内容可编辑的拖放光标位置
- 使拖放的元素可放置，同时仍可拖动
- 修改拖放后可拖动的行为
- 原生HTML5拖放:使可拖动对象不可拖放
- jQuery 拖放，验证可拖动 ID
- 为什么HTML5拖放拖动图像在隐藏时不显示
- 使用HTML5拖放，有没有办法在保持拖动流的同时隐藏元素
- 如何在 Jquery 中初始化可拖放对象上的可拖动对象
- Jquery拖放:拖放背景图像
- Html5拖放-拖拽文本的单个字符-可以看到光标中的字符与图像一起工作
