这是我在 StackOverFlow 中的第一篇文章，我也只是编码新手。我正在尝试创建一种效果，从牌组中绘制一张牌。(在本例中，我只是创建一个矩形 - 怪物(红色)作为占位符)并将该牌拖放到目标矩形区域上。
当我手动创建卡片时，如下面的 HTML 代码所示，可以将该矩形拖放到目标矩形区域中。但是，当我使用Javascript创建矩形时，可以拖动使用Javascript创建的矩形并且可以实现“悬停”效果，但无法将其放入目标矩形区域。
这是我的 HTML 代码:
<img id="deck" class="cards board6" src="../images/Deck.png" onclick="drawCard()">
<section id="dropBox">
</section>
<section id="hand">
</section>
<img id="card1" class="cards hand1" src="../images/Monsters(Red).png">
这是我的 JavaScript 代码:
//Drag & Drop
function doFirst() {
var card1 = document.getElementById('card1');
card1.addEventListener("dragstart", startDrag, false);
var dropBox = document.getElementById('dropBox');
dropBox.addEventListener("dragenter", dragEnter,false);
dropBox.addEventListener("dragleave", dragLeave,false);
dropBox.addEventListener("dragover", function(e){e.preventDefault();},false);
dropBox.addEventListener("drop", dropped,false);
}
function dragEnter(e){ // Hover In Effect
e.preventDefault();
dropBox.style.background="SkyBlue";
dropBox.style.border="3px solid red";
}
function dragLeave(e){ //Hover Out Effect
e.preventDefault();
dropBox.style.background="White";
dropBox.style.border="3px solid blue";
}
function startDrag(e) {
var code = '<img id="card1" class="cards hand1" src="../images/Monsters(Red).png">';
e.dataTransfer.setData('Text', code);
}
function dropped(e) {
e.preventDefault();
dropBox.innerHTML = e.dataTransfer.getData('Text');
dropBox.style.background="White";
dropBox.style.border="3px solid blue";
}
window.addEventListener("load", doFirst, false);
//Dealing Of Cards
document.getElementById("hand");
var noCardsInHand = 0; //Initialization
function drawCard(e) {
if (noCardsInHand === 0) {
alert("Card Drawn");
hand.innerHTML = '<img id="card1" class="handCards1 cards" src=\'../images/Monsters(Red).png\'>';
noCardsInHand++;
alert(noCardsInHand);
}
else if (noCardsInHand === 1) {
alert("Card Drawn");
hand.innerHTML = '<img id="card1" class="handCards1 cards" src=\'../images/Monsters(Red).png\'><img id="card1" class="handCards2 cards" src=\'../images/Monsters(Red).png\'>';
noCardsInHand++;
alert(noCardsInHand);
}
else if (noCardsInHand === 2) {
alert("Card Drawn");
hand.innerHTML = '<img id="card1" class="handCards1 cards" src=\'../images/Monsters(Red).png\'><img id="card1" class="handCards2 cards" src=\'../images/Monsters(Red).png\'><img id="card1" class="handCards2 cards" src=\'../images/Monsters(Red).png\'>';
noCardsInHand++;
alert(noCardsInHand);
}
}
最佳答案
你的代码没问题，你只需要在 html 元素渲染后运行它，否则它将找不到任何可以绑定(bind)的内容
https://jsfiddle.net/gsvwncmu/3/
在 jsfiddle 的 javascript 区域中，顶部有一个齿轮，这将放下以下内容并选择 ondomready
现在要在代码中执行此操作，您必须将脚本移至正文标记的末尾，或者将脚本文件添加为延迟
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
<script src="./jsfile.js" defer="defer"></script>
</head>
<body>
<img id="deck" class="cards board6" src="http://i63.tinypic.com/f40188.png" onclick="drawCard()">
<section id="dropBox">
</section>
<section id="hand">
</section>
<img id="card1" class="cards hand1" src="http://i68.tinypic.com/2h520bd.png">
<img class="cards hand2" src="http://i68.tinypic.com/2h520bd.png">
</body>
</html>
JS
//Drag & Drop
function doFirst() {
var card1 = document.getElementById('card1');
card1.addEventListener("dragstart", startDrag, false);
var dropBox = document.getElementById('dropBox');
dropBox.addEventListener("dragenter", dragEnter,false);
dropBox.addEventListener("dragleave", dragLeave,false);
dropBox.addEventListener("dragover", function(e){e.preventDefault();},false);
dropBox.addEventListener("drop", dropped,false);
}
function dragEnter(e){ // Hover In Effect
e.preventDefault();
dropBox.style.background="SkyBlue";
dropBox.style.border="3px solid red";
}
function dragLeave(e){ //Hover Out Effect
e.preventDefault();
dropBox.style.background="White";
dropBox.style.border="3px solid blue";
}
function startDrag(e) {
var code = '<img id="card1" class="cards hand1" src="../images/Monsters(Red).png">';
e.dataTransfer.setData('Text', code);
}
function dropped(e) {
e.preventDefault();
dropBox.innerHTML = e.dataTransfer.getData('Text');
dropBox.style.background="White";
dropBox.style.border="3px solid blue";
}
window.addEventListener("load", doFirst, false);
//Dealing Of Cards
document.getElementById("hand");
var noCardsInHand = 0; //Initialization
function drawCard(e) {
if (noCardsInHand === 0) {
alert("Card Drawn");
hand.innerHTML = '<img id="card1" class="handCards1 cards" src=\'../images/Monsters(Red).png\'>';
noCardsInHand++;
alert(noCardsInHand);
}
else if (noCardsInHand === 1) {
alert("Card Drawn");
hand.innerHTML = '<img id="card1" class="handCards1 cards" src=\'../images/Monsters(Red).png\'><img id="card1" class="handCards2 cards" src=\'../images/Monsters(Red).png\'>';
noCardsInHand++;
alert(noCardsInHand);
}
}
CSS
.cards {
width: 55px;
height: 82.5px;
}
.board6 {
margin-left: 3%;
}
.hand1 {
margin-left: 9%;
}
.hand2 {
margin-left: 1%;
}
#dropBox {
width: 535px;
height: 82.5px;
margin: 5px;
border: 3px solid blue;
margin-left: 5%;
}
#hand {
width: 535px;
height: 82.5px;
margin: 5px;
border: 3px solid red;
margin-left: 5%;
}
关于javascript - 无法拖放由 Javascript 创建的项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41228500/