Question

Codepen：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

我认为基于您提供的代码的最简单方法是为和元素设置匹配的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

中显示它

jQuery UI Draggable和Droppable仅返回原始位置

1 个答案: