Javascript 订购图像游戏

我正在尝试制作一个简单的游戏，其中我展示了五张电影海报，用户必须按发布日期订购，如所附图片所示（这些海报是我发现的随机海报）

每张图片的编码如下：

<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>

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

在这里，您可以找到一个jsfiddle来帮助您理解我的意思和我现在拥有的东西：

试试这个提琴：

$（函数（）{
//有画廊和转机
var$gallery=$（“#gallery”），
$transfer=$（“#transfer”），
$gen_dialog=$（“#gen_dialog”）；
//让库项目可以拖动
$（“li”，$gallery）。可拖动({
取消：“a.ui-icon”，//单击图标不会启动拖动
revert:“invalid”//未删除时，项目将恢复到其初始位置
遏制：“文件”，
助手：“克隆”，
光标：“移动”
});
//让传输可拖放，接受画廊项目
$transfer.dropable({
接受：“画廊>李”，
activeClass：“ui状态突出显示”，
drop：函数（事件、用户界面）{
deleteImage（ui.draggable）；
}
});
//让画廊也可以放下，接受转移的物品
$gallery.droppable({
接受：“#转李”，
activeClass：“自定义活动状态”，
drop：函数（事件、用户界面）{
可回收图像（ui.draggable）；
}
});
//设置“生成”按钮的对话框
$gen_dialog.dialog({
自动打开：错误，
身高：140，
“标题”：“生成的报告”，
莫代尔：对
});
//用于在下拉框中生成图标信息的功能
$（'button.generate'）。单击（函数（）{
var content=$（'ulli h5'，$transfer）.map（函数（i，v）{
返回$（this.text（）；
}).get（）；
$gen_dialog.find（'.diag content'）.html（content.join（'，'））.end（）.dialog（'open'）；
});
//用于将图标重置回原始位置的功能
$（'button.reset'）。单击（函数（）{
$（'ul li'，$transfer）.each（函数（）{
回收图像（$（本））；
});
});
切换按钮（）；
//图像删除功能
var recycle_icon=“”；
函数deleteImage（$item）{
$item.fadeOut（函数（）{
var$list=$（$ul'，$transfer）.length？
$（“ul”，美元转账）：
$（“
”）。附加到（$transfer）；
$item.find（“a.ui-icon-transferthick-e-w”）.remove（）；
$item.append（回收图标）.appendTo（$list）.fadeIn（函数（）{
$item
.animate（{宽度：“48px”}）
.查找（“img”）
.animate（{height:“36px”}，function（）{
切换按钮（）；
});
});
});
}
//图像循环功能
var transfer_icon=“”；
功能回收年龄（$item）{
$item.fadeOut（函数（）{
$item
.find（“a.ui-icon-transfer-e-w”）
.删除（）
(完)
.css（“宽度”，“96px”）
.append（传输图标）
.查找（“img”）
.css（“高度”，“72px”）
(完)
.appendTo（$gallery）
.fadeIn（函数（）{
切换按钮（）；
});
});
}
//当图标在屏幕上传输时显示按钮
函数切换按钮（）{
$（'div.col3 button'）。切换（$（'>ul>li'，$transfer）。长度>0）；
}
//通过事件委派解决图标行为
$（“ul.gallery>li”）。单击（功能（事件）{
变量$item=$（此），
$target=$（event.target）；
如果（$target.is（“a.ui-icon-transferthick-e-w”））{
删除图像（项目）；
}否则如果（$target.is（“a.ui-icon-transfer-e-w”））{
回收年龄（项目）；
}
返回false；
});
});

问题出在

ondrop

事件处理程序中，当在img（而不是div）上放置时，您使用以下代码：

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

这将把拖动的图像附加到目标上，目标也是图像。因此，拖动的图像将消失。您必须检查掉落的目标是否为图像，如果是图像，则自然行为是交换两个图像。以下是它应该是的代码：

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，使图像更小，以便在JSFIDLE中更好地呈现（和测试）

---

。如果您创建了一个jsfiddle，这将对您有所帮助。我对jsfiddle不太熟悉，您会发现它工作得不太好，但我认为您可以了解我在代码方面的知识（我在这方面很新，如果我的错误太明显，我很抱歉），因为您使用相对路径，jsfiddle无法找到您的图像。我用虚拟图像更新了你的。你可以编辑并添加你的帖子，这样人们可以更容易地帮助你。我会编辑帖子，非常感谢！如果使用

node=document.getElementById（“drag1”+i），那么您的函数
check（）
将起作用OP不包括jQuery，从发布的代码片段和不包括库的JSFIDLE中可以明显看出这一点。无论如何，谢谢，我也会尝试一下！非常感谢，埃雷纳奥斯！谢谢你的支持，如果你喜欢我的努力，那么请投赞成票！[谁想投反对票！]无论如何，谢谢：）太完美了！非常感谢你！
ev.target.appendChild(document.getElementById(data));

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);
    }
}