javascript - 订购图像游戏

Question

我正在尝试制作一个简单的游戏，我在其中展示了五张电影海报，用户必须按发布日期对它们进行排序，如附图所示(这些海报是我随机找到的)。

每张图片编码如下:

<div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)" style="display:inline-block; position:relative">
        <img value="5" src="../images/movies/hobbit.png" draggable="true" ondragstart="drag(event)" id="drag15" width="162" height="240">
</div>

其中div11表示div1,image1，所以其他的会像div12,div13...图片id drag15表示这张图片是正确顺序的第五张，所以其他的就是drag11,drag12...

放置它们的div是这样的:

<div id="div21" ondrop="drop(event)" ondragover="allowDrop(event)" style="display:inline-block; position:relative"></div>

因此，例如，id="drag13"的图像必须放在 id="div23"的 div 中。我有以下功能允许在空白 div 中拖放图像，但是当我将图像拖到已经有图像的 div 时，第二个图像消失了:

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

在这里你可以找到一个 jsfiddle 来尝试帮助你理解我的意思和我现在所拥有的:http://jsfiddle.net/3GKPn/2/

Answer 1

问题出在 ondrop 事件处理程序中，当拖放到 img(不是 div)上时，您使用以下代码:

ev.target.appendChild(document.getElementById(data));

这会将拖动的图像附加到也是图像的目标。因此，拖动的图像消失了。您必须检查放置目标是否是图像，如果是图像，自然行为是交换 2 个图像。这是它应该是的代码:

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("Text");
    var dragged = document.getElementById(data);
    //check if the dropping target is an image
    if(ev.target.tagName == "IMG") {
      //preparing to swap the 2 images (the dragged image and the target image)
      var parent = ev.target.parentElement || ev.target.parentNode;
      dragged.parentElement.appendChild(ev.target);
      parent.appendChild(dragged);
    } else {
      //check if the div already has some img, 
      //swap the 2 images
      if(ev.target.children.length > 0) {
        dragged.parentElement.appendChild(ev.target.children[0]);
      }
      ev.target.appendChild(dragged);
    }
}

我还稍微修改了 CSS 以使图像更小，以便在 jsFiddle 中更好地呈现(和测试)。

Updated demo .