jQuery UI拖放对齐到中心

Sava Vlad 发表于 Dev

萨瓦·弗拉德（Sava Vlad）

我需要一点帮助。我需要有一个蓝色圆圈，一个红色圆圈，一个蓝色正方形和一个红色正方形。我需要将红色圆圈拖动到红色正方形的中心，将蓝色圆圈拖动到蓝色正方形的中心。除非我将其拖动到正确的位置，否则它应该恢复到原始位置。

这是我到目前为止所拥有的：

$("#draggable, #draggable2").draggable({
    revert: 'invalid', snap: "#droppable2"
});

$("#droppable").droppable({
    accept: '#draggable'
});

$("#droppable2").droppable({
    accept: '#draggable2',
});

http://jsfiddle.net/tM7cp/269/

我无法将圆放置在正方形的中心，该怎么做？

您可以使用jQuery Ui的position()实用程序方法将项目手动对齐到可放置对象的中心，如下所示（为避免重复代码和CSS，我略微更改了逻辑）：

$(".draggable").draggable({
  revert: 'invalid'
});

$(".droppable").droppable({
  accept: function(item) {
    return $(this).data("color") == item.data("color");
  },
  drop: function(event, ui) {
    var $this = $(this);
    ui.draggable.position({
      my: "center",
      at: "center",
      of: $this,
      using: function(pos) {
        $(this).animate(pos, 200, "linear");
      }
    });
  }
});

.draggable {
  float: left;
  width: 100px;
  height: 100px;
  padding: 0.5em;
  margin: 10px 10px 10px 0;
  border: 1px solid black;
  border-radius: 50%;
}
#draggable {
  background-color: red;
}
#draggable2 {
  background-color: blue;
}
.droppable {
  padding: 0.5em;
  float: left;
  margin: 10px;
}
#droppable {
  width: 100px;
  height: 100px;
  background-color: red;
}
#droppable2 {
  width: 120px;
  height: 120px;
  background-color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<div id="draggable" class="draggable" data-color="red"></div>
<div id="draggable2" class="draggable" data-color="blue"></div>
<div id="droppable" class="droppable" data-color="red"></div>
<div id="droppable2" class="droppable" data-color="blue"></div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。