我有一個div我只想聽dragend事件的地方,但由于某種原因,它不起作用。當藍色框落入矩形時,我想控制臺日志,但它什么也沒給......
這是代碼:
<!DOCTYPE html>
<html>
<head>
<style>
#a {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa; }
#drag1 {
background-color: blue;
width: 100px;
height: 70px;
}
</style>
</head>
<body>
<p>Drag the blue box into the rectangle and wait for the console log:</p>
<div id="a"></div>
<br />
<div id="drag1" draggable="true"></div>
</body>
<script>
dropArea = document.getElementById("a");
dragger = document.getElementById("drag1");
dropArea.addEventListener("dragend", () => {
console.log("Hello.....");
});
</script>
</html>
uj5u.com熱心網友回復:
dragend 事件在您完成拖動時從元素拖動啟動
您必須將 dragend 事件放在拖動元素而不是放置區域上
改變
dropArea.addEventListener("dragend", () => {
經過
dragger.addEventListener("dragend", () => {
dropArea = document.getElementById("a");
dragger = document.getElementById("drag1");
dragger.addEventListener("dragend", () => {
console.log("Here.....");
});
<!DOCTYPE html>
<html>
<head>
<style>
#a {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa; }
#drag1 {
background-color: blue;
width: 100px;
height: 70px;
}
</style>
</head>
<body>
<p>Drag the blue box into the rectangle and wait for the console log:</p>
<div id="a"></div>
<br />
<div id="drag1" draggable="true"></div>
</body>
</html>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/404543.html
標籤:
