javascript - 带有多个 Drop 占位符和重置选项的 Jquery 拖放

Question

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

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