Javascript 像在拼图中一样拖放图像

如何制作包含图像的2个div以拖放并相互匹配。我的代码如下所示：

编辑：项目的链接

---

请参阅随附的小提琴： 希望这会给你一个好的开始。。正如沃尔夫所说，我并不是下载整个项目，而是写整个项目

祝你好运

$(document).ready(function () {
$('#pieces>div').draggable();
$('#puz>div').droppable({
    accept: "#pieces>div",
    //        activeClass: "ui-state-hover", //can be cool to have these..
    //        hoverClass: "ui-state-active",
     drop: function (event, ui) {
        $(ui.draggable).detach().css('background-color', 'red').css({ //you wont need this as your classes will all stay the same.
            top: 0,
            left: 0,
            height:100,
            width: 100
        }).appendTo(this);
        //disable draggable on them also..
    }
});
});

---

该死的…现在我明白了，但主要的问题是编辑。你们能通过提供更多相关的代码和一个JSFIDLE来改进你们的问题吗@a、 Wolff正在编辑…我上传了整个项目，因为它有点难以解释…右边的图片应该适合左边的图片：（好吧，没有人会下载一个完整的项目来修复看起来只是一个小小的意外行为。至少我不会…理解…但也有图像…像拼图一样的图像需要匹配。我如何才能在一个图像中匹配这些图像？谢谢你，我现在就尝试一下。谢谢！

$(document).ready(function () {
$('#pieces>div').draggable();
$('#puz>div').droppable({
    accept: "#pieces>div",
    //        activeClass: "ui-state-hover", //can be cool to have these..
    //        hoverClass: "ui-state-active",
     drop: function (event, ui) {
        $(ui.draggable).detach().css('background-color', 'red').css({ //you wont need this as your classes will all stay the same.
            top: 0,
            left: 0,
            height:100,
            width: 100
        }).appendTo(this);
        //disable draggable on them also..
    }
});
});