像拼图一样拖放图像

Question

如何制作包含图像的2个div来拖放并相互适应。我的代码如下：

编辑：项目http://www.fileshare.ro/e30355196

的链接

$(function() {
    $( "#right img" ).draggable
    ({

    revert: "invalid"

    });
    $( "#left" ).droppable({

      tolerance: 'fit',

      drop: function( event, ui ) {
         $(ui.draggable).clone().appendTo($("#left"));
      }
    });
  });

Answer 1

请找附件小提琴： 希望这会给你一个良好的开端..就像沃尔夫说的那样，我不会下载整个项目来写整篇文章..

http://jsfiddle.net/jFIT/qs3TF/1/

祝你好运..

$(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..
    }
});
});