Javascript jQuery UI仅可拖放并返回到原始位置

代码笔在这里：

我有一些可以拖动的图像。我只需要将它们恢复到原来的位置。因此，基本上，即使它们被拖回错误的位置，它们也会捕捉到它们在表中的原始位置

现在，当您将其拖回原始位置时，它可以添加到另一个td，即使它包含另一个图像。图像应该可以放在紫色的盒子里，如果有人把它移回黑色的桌子，它应该只回到原来的位置，即使它被拖回另一个地方

以下是JS：

$( ".emojis" ).draggable({
                revert : function(event, ui) {
        $(this).data("ui-draggable").originalPosition = {
            top : 0,
            left : 0
        };
        return !event;
    }
});
            $('#drop-em').droppable({
                drop: function(ev, ui) {
                    $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
                }

            });
            $('#emoji-table td').droppable({
                drop: function(ev, ui) {


                    $(ui.draggable).detach().css({top: 0,left: 0}).prependTo(this);

                }

            });

---

我认为根据您提供的代码，最简单的方法是为和元素设置一个匹配的id，这样在删除图像时，它可以检查id是否相互匹配。如果它们不匹配，只需将图像发送到正确的元素

  $( ".emojis" ).draggable({
    revert : function(event, ui) {
    // on older version of jQuery use "draggable"
    // $(this).data("draggable")
    // on 2.x versions of jQuery use "ui-draggable"
    // $(this).data("ui-draggable")
    var bRevertingImg = this.parent("#drop-em");

    //Only apply logic when reverted
    //needed since this function is called anytime .emoji is dropped
    if (!bRevertingImg.length) {
      var imgID = $(this).data("id");
      var cellID = $(this).parent().data("id");

      //If the child and parent ids don't match, we move the child to the correct parent
      if (imgID !== cellID) {
        var correctCell = $("#emoji-table").find("td[data-id='" + imgID + "']");
        correctCell.prepend(this)        
      }

      // return boolean
    }
    return !event;   

    // that evaluate like this:
    // return event !== false ? false : true;
  }
});

---

我编辑了你的代码笔，以便在实际操作中显示它

谢谢你，这正是我想要的。