Оповещение с помощью перетаскивания с использованием JavaScript - PullRequest
Новая
       8

Оповещение с помощью перетаскивания с использованием JavaScript

0 голосов
/ 06 июня 2018

Я все еще новичок во всем этом, и я искал онлайн, но все еще не могу найти способ.

У меня есть функция перетаскивания.Пользователю будет дан заголовок статьи, и ему будет предложено перетащить заголовок статьи в поле с надписью «True» или «False».

Как я могу получить уведомление пользователя, когда они его уронят в 'Ложная коробка?

Тия !!

HTML код: 

<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"
})

1 Ответ

0 голосов
/ 06 июня 2018

Вы можете получить целевой элемент в обработчике события 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')
    }
...
})
...