Question

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

这是我到目前为止所做的：

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

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

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

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

我无法将圆圈定位到正方形的中心，我该怎么做？

Answer 1

您可以使用jQuery Ui的position()实用程序方法手动将项目捕捉到droppables的中心，如下所示（我稍微改变了你的逻辑以避免重复代码和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>

Answer 2

这是 TJ 的 response 的更新示例。我创建了一个 jQuery 插件，可以调用该插件将可拖动项目置于可放置区域的中心。

(function($) {
  $.fn.centerOnDrop = function(ui) {
    ui.draggable.position({
      my: 'center',
      at: 'center',
      of: this,
      using: function(pos) {
        $(this).animate(pos, 200, 'linear');
      }
    });
  };
})(jQuery);

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

$('.droppable').droppable({
  accept: function($item) {
    return $(this).data('color') === $item.data('color');
  },
  drop: function(event, ui) {
    $(this).centerOnDrop(ui);
  }
});

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: center;
  align-items: center;
}

.draggable   { width: 4em; height: 4em; border-radius: 50%;         }
#draggable-1 { background-color: pink;      border: 1px solid red;  }
#draggable-2 { background-color: lightblue; border: 1px solid blue; }

.droppable   { width: 5em; height: 5em; }
#droppable-1 { background-color: red;   }
#droppable-2 { background-color: blue;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="draggable-1" class="draggable" data-color="red"></div>
<div id="draggable-2" class="draggable" data-color="blue"></div>
<div id="droppable-1" class="droppable" data-color="red"></div>
<div id="droppable-2" class="droppable" data-color="blue"></div>

jQuery UI拖放捕捉到中心

2 个答案: