Question

这是我在StackOverFlow中的第一篇文章，我也是编码的新手。我正在尝试创建一个效果，我将从卡片中绘制一张卡片。（在这种情况下，我只创建一个矩形 - 怪物（红色）作为占位符）并拖动该卡片并将其放在目标矩形区域上。

当我手动创建卡片时，如下面HTML代码所示，可以将该矩形拖放到目标矩形区域。但是，当我使用Javascript创建一个矩形时，可以拖动使用Javascript创建的矩形并且＆＃34; hover＆＃34;效果有效，但无法将其拖放到目标矩形区域。

这是我的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);
}
}

JSFiddle Demo

Answer 1

您的代码很好，您只需要在html元素呈现后运行它，否则它将无法找到任何要绑定的内容

https://jsfiddle.net/gsvwncmu/3/

在javascript区域的jsfiddle中，顶部有一个齿轮，这将删除以下内容并选择ondomready

现在要在您的代码中执行此操作，您必须将脚本移动到body标记的末尾，或者将脚本文件添加为deferred

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创建的项目

1 个答案: