Heim >Web-Frontend >HTML-Tutorial >Ein Skript ausführen, wenn ein Element in HTML gezogen wird?
Ein Skript ausführen, wenn ein Element in HTML gezogen wird?
- 王林nach vorne
- 2023-09-16 22:05:06761Durchsuche
Verwenden Sie das ondaragoverHTML-Attribut in HTML, um beim Ziehen eines Elements in HTML ein Skript auszuführen.
Beispiel
Sie können versuchen, den folgenden Code auszuführen, um ondarragover Property -
<!DOCTYPE HTML>
<html>
<head>
<style>
.drag {
float : left;
width : 100px;
height : 35px;
border : 2px dashed #876587;
margin : 15px;
padding: 10px;
}
</style>
</head>
<body>
<div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)">
<p ondragstart = "dragStart(event)" ondrag = "draggingNow(event)" draggable = "true" id="dragtarget">Drag!</p>
</div>
<div class = "drag" ondrop = "drop(event)" ondragover = "dropNow(event)"></div>
<div id = "box"></div>
<p>Drag the left box to the right or drag the right box to the left.</p>
<script>
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function draggingNow(event) {
document.getElementById("box").innerHTML = "Dragged successfully!";
}
function dropNow(event) {
event.preventDefault();
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("box").innerHTML = "The element dropped successfully!";
}
</script>
</body>
</html> zu erreichenDas obige ist der detaillierte Inhalt vonEin Skript ausführen, wenn ein Element in HTML gezogen wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Was sind die Anfangs- und Endwinkel von Bögen im HTML5-Canvas?Nächster Artikel：Was sind die Anfangs- und Endwinkel von Bögen im HTML5-Canvas?