jQuery UI 可拖动和可放置仅返回原始位置

Question

在这里编写代码：https://codepen.io/anon/pen/weZwVx

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

现在，当您将其拖回原始位置时，即使它包含另一个图像，也可以将其添加到另一个 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);

                }

            });

Answer 1

我认为根据您提供的代码，最简单的方法是为 and 元素设置一个匹配的 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;
  }
});

我编辑了你的 codepen 以在行动中显示它here