jQuery UI 可拖放 Return 仅限原始位置

Question

Codepen 在这里：https://codepen.io/anon/pen/weZwVx

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

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

这是 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

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

我编辑了你的代码笔以展示它的实际效果here

jQuery UI 可拖放 Return 仅限原始位置

jQuery UI Draggable and Droppable Return to Original Position Only

javascript

jquery

jquery-ui

jquery-ui-draggable

jquery-ui-droppable