Question

我仍然是这一切的新手，我一直在网上寻找，但仍然无法找到方法。

我有拖放功能。将为用户提供文章标题，并指示将文章标题拖到标有“True”或“False”的框中。

当我们将用户放入“错误”框时，如何让用户提醒他？

Tyia !!

HTML code：

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="droptarget">True or False?
<div draggable="true" id="dragtarget" class="drag">Article (Drag Me!)</div>
</div>
<div class="droptarget">False</div>
<div class="droptarget">True</div>
<script src="site.js"></script>
</body>
</html>

JavaScript代码：

/* Event fired on the drag target */
document.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("Text", event.target.id)
//document.getElementById("demo").innerHTML = "Started to drag the p 
element."
})

/* Events fired on the drop target */
document.addEventListener("dragover", function(event) {
event.preventDefault()
})

document.addEventListener("drop", function(event) {
event.preventDefault()
var data = event.dataTransfer.getData("Text")
event.target.appendChild(document.getElementById(data))

//document.getElementById("demo").innerHTML = "The p element was 
dropped"
})

Answer 1

您可以通过drop在event.target事件处理程序中获取目标元素。您还需要通过添加id，唯一class等方式来了解它是正确的元素。

示例：

<div class="droptarget" id="targetFalse">False</div>

关于JS：

document.addEventListener("drop", function(event) {
    event.preventDefault()
    if(event.target.id==='targetFalse'){
        alert('False')
    }
...
})

使用javascript

1 个答案: