Jquery拖放有多个Drop占位符和重置选项

Question

我试图使用jquery拖放开发游戏并需要帮助。我面临的问题是有4个放置位置和大约25个可拖动元素。每个drop位置只能有一个draggable元素，如果我尝试删除另一个元素，则应该交换位置，之前删除的元素将获得新拖动元素的初始位置。

$(".drag").draggable({
  containment: ".dropable",
  revert: "invalid",
  appendTo: '.dropable',
  start: function (evt, ui) {
    if (!ui.helper.data("originalPosition")) {
        ui.helper.data("originalPosition", ui.originalPosition)
    }
}
});
$(".debit_option").droppable({
  greedy: true,
  accept: '.drag',
  over: function () {
    $(this).removeClass('out').addClass('hoverClass')
},
  out: function () {
    $(this).removeClass('hoverClass').addClass('out')
},
  drop: function (event, ui) {}
});
$(".credit_option").droppable({
 over: function () {
  $(this).removeClass('out').addClass('hoverClass')
 },
 out: function () {
  $(this).removeClass('hoverClass').addClass('out')
 },
 drop: function (event, ui) {}
 })
 });
function revertDraggable($selector) {
$selector.each(function () {
    var $this = $(this);
    console.log($this.data('originalPosition'));
    position = $this.data('originalPosition');
    if (position) {
        $this.animate({
            left: position.left,
            top: position.top
        }, 500, function () {
            $this.data("orignalPosition", null)
        })
    }
})
}
$(".no_entry a").click(function (e) {
   e.preventDefault();
   revertDraggable($(".drag"))
});