Question

在此jsFiddle我遇到了一个问题。让我来描述一下

当我拖动任何元素包含＆＃34; N＆＃34;到其他<td>工作得很好。但在那之后，当我试图将任何元素拖到它上面时，原来的位置不起作用。

我的期望：当任何元素移动到其他地方时，旧地方必须允许接受其他元素。

以下是代码：

$(function () {
  $(".dragDiv").draggable({
    create: function () {
        $(this).data('position', $(this).position())
    },
    revert: 'invalid',
    stop: function () {
        $(this).draggable('option', 'revert', 'invalid');
    }
  });
  $('.dragDiv').droppable({
    greedy: true,
    tolerance: 'touch',
    drop: function (event, ui) {
        ui.draggable.draggable('option', 'revert', true);
    }
  });
  $(".mainTable tr td").droppable({
    drop: function (event, ui) {
        console.log(JSON.stringify($(this).attr('id')));
        console.log(JSON.stringify(ui.draggable.attr("id")));
        snapToMiddle(ui.draggable, $(this));
    },
    accept: function () {
        return $(this).find("*").length == 0;
    }
  });
});
function snapToMiddle(dragger, target) {
  var topMove = target.position().top - dragger.data('position').top + (target.outerHeight(true) - dragger.outerHeight(true)) / 2;
  var leftMove = target.position().left - dragger.data('position').left + (target.outerWidth(true) - dragger.outerWidth(true)) / 2;
  dragger.animate({
    top: topMove,
    left: leftMove
  }, {
    duration: 100,
    easing: 'easeOutBack'
  });
}

Answer 1

问题是jQuery UI可拖动小部件实际上并没有将元素附加到droppable on drop，它只是操纵CSS定位属性，因此即使项目被放入另一个droppable，$(this).find("*").length == 0;也将为false。

您可以通过手动将draggable附加到droppable来解决此问题。

此外，您可以使用position()实用程序方法轻松地将可拖动相对于droppable居中。

＆＃13;

$(function() {
  $(".dragDiv").draggable({
    revert: 'invalid'
  });
  $(".mainTable tr td").droppable({
    accept: function() {
      return $(this).find("*").length == 0;
    },
    drop: function(event, ui) {
      var $this = $(this);
      $this.append(ui.draggable.css({
        /* manually append the element
                and reset positioning */
        top: 0,
        left: 0
      }));
      ui.draggable.position({
        my: "center",
        at: "center",
        of: $this,
        using: function(pos) {
          $(this).animate(pos, 100, "easeOutBack");
        }
      });
    }
  });
});

＆＃13;

.mainTable {
  margin: 20px auto;
  padding: 0px;
}
.mainTable tr td {
  width: 100px;
  height: 100px;
}
.dragDiv {
  text-align: center;
  background-color: #00ABA9;
  height: 50px;
  vertical-align: middle;
  margin: auto;
  position: relative;
  width: 50%;
}

＆＃13;

<link href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<table border="1" class="mainTable">
  <tr>
    <td id="11">
      <div class="dragDiv" id="1">N</div>
    </td>
    <td id="12">&nbsp;</td>
    <td id="13">&nbsp;</td>
  </tr>
  <tr>
    <td id="21">&nbsp;</td>
    <td id="22">
      <div class="dragDiv" id="2">N</div>
    </td>
    <td id="23">&nbsp;</td>
  </tr>
  <tr>
    <td id="31">&nbsp;</td>
    <td id="32">&nbsp;</td>
    <td id="33">
      <div class="dragDiv" id="3">N</div>
    </td>
  </tr>
</table>

＆＃13;

启用droppable元素仅在空值时才接受draggables

1 个答案: