logo标签列表

如何使用JavaScript将一张图片拖放到另一张图片上方？

javascripthtmlcss
3

目前，我正在构建一个功能性的棋盘，你可以在上面玩游戏，但我遇到了一个问题，就是如何让棋子拖放到一些绿点上。

问题图片: enter image description here

我想拖动这个棋子并将其放置在两个绿点中的一个上，但我不知道该怎么做。每当我试图把棋子拖放到绿点上时，我的棋子就消失了。我该如何解决这个问题？

如果有帮助的话，绿点位于一些div标签中。绿点被设置为display none，只有在单击兵棋子时才会出现。我只需要人们查看第5、6和7排白色兵的位置以及绿点的位置，就可以了。

我仅为每行中的一个div设置了一些拖动事件，即第5和6排，还为第7排上的第一个白色兵设置了一个拖动事件，并在可以从上面的图像中看到棋盘的一个部分进行测试。这是我的......

JsFiddle: https://jsfiddle.net/nitroadam1233/ckn216px/2/

JavaScript代码：

//dragging white pawns
function allowDrop(event) {
    event.preventDefault();
}

function drag(event) {
    event.dataTransfer.setData("text", event.target.id);
}
  
function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    var newNode = document.getElementById(data).cloneNode(true);

    clearChildren(event.target);
    event.target.appendChild(newNode);
}

function clearChildren(el) {
    while (el.firstChild) {
      el.removeChild(el.firstChild);
    }  
}

HTML 代码：

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>
        <div id="board">
          
            <!-- 1st row -->
            <div><img src="images/black_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/black_knight.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/black_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/black_queen.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/black_king.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/black_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/black_knight.png"  draggable="true" ondragstart="drag(event)"height="65px" width="65px"></div>
            <div><img src="images/black_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
          
            <!-- 2nd row-->
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            <div><img src="images/black_pawn.png" draggable="true" ondragstart="drag(event)" class="black_pawns" height="65px" width="65px"></div>
            
            <!-- 3rd row empty-->
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
          
            <!-- 4th row empty-->
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
            <div class="empty_squares"></div>
          
            <!-- 5th row empty-->
            <div class="empty_squares5" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
          
            <!-- 6th row empty-->
            <div class="empty_squares5" ondrop="drop(event)" ondragover="allowDrop(event)"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
            <div class="empty_squares5"><img src="images/greenDot.png" height="40px" width="60px"></div>
          
            <!-- 7th row-->
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="item1" ondragstart="drag(event)" onmousedown="dontShowDots(event)" onclick="showDots()" height="65px" width="65px"></div>
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots2(event)" onclick="showDots2()" height="65px" width="65px"></div>
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontSD3(event)" onclick="showDots3()" height="65px" width="65px"></div>
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots4(event)" onclick="showDots4()" height="65px" width="65px"></div>
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots5(event)" onclick="showDots5()" height="65px" width="65px"></div>
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots6(event)" onclick="showDots6()" height="65px" width="65px"></div>
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots7(event)" onclick="showDots7()" height="65px" width="65px"></div>
            <div class="seventh_squares"><img src="images/white_pawn.png" draggable="true" id="" class="" onmousedown="dontShowDots8(event)" onclick="showDots8()" height="65px" width="65px"></div>
          
            <!-- 8th row-->
            <div><img src="images/white_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/white_knight.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/white_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/white_queen.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/white king.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/white_bishop.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/white_knight.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>
            <div><img src="images/white_rook.png" draggable="true" ondragstart="drag(event)" height="65px" width="65px"></div>

            <script src="interactive.js"></script>
        </div>
    </body>
</html>
1个回答
1

代码可以进行很多优化，但为了解决特定问题，需要修改下拉函数如下，其中注释说明了两行新代码的目的...

function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text");
    var newNode = document.getElementById(data).cloneNode(true);

    // Clear the drag square of the piece IMG...
    clearChildren( document.getElementById(data).parentNode );
    
    clearChildren(event.target);
    event.target.appendChild(newNode);
    
    // Finally, remove the "empty_squares5" class from the drop square.
    event.target.classList.remove( 'empty_squares5' );
}
你展示给我的方法可行，但我想知道是否有办法将其应用于其余的棋子？@Trentium - john fernado
@AdamBreslin "代码中有很多可以优化的地方..." 几乎所有重复的<div>和对arrayDots或arraySeventhSquares数组元素的特定引用都可以从适当的数据结构和循环中受益，这些循环表示各个部分及其移动。这些数据表示可以用于刷新DOM...由于数据问题与本主题的问题无关，请提出另一个问题，询问是否有更简单的方法来构建和管理代表棋盘的64个<div>，我会详细说明... - Trentium
我刚刚发布了一个新问题，询问如何优化我的代码。这是链接：https://stackoverflow.com/questions/68976802/how-do-i-optimize-my-javascript-code-that-i-currently-have @Trentium - john fernado
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接