jQuery UI拖放到中心 [英] jQuery UI drag and drop snap to center

问题描述

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

这是我迄今为止所做的：

  $（ #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;填充：0.5em; margin：10px 10px 10px 0;边框：1px纯黑色; 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 =draggableclass =draggabledata-color =red>< / div>< div id =draggable2class =draggabledata-color =blue>< / div>< div id =droppableclass =droppabledata-color =red>< / div> < div id =droppable2class =droppabledata-color =blue>< / div>  

/ p>

I need a little help please. I need to have a blue circle, a red circle, a blue square and a red square. I need to drag the red circle to the center of the red square and the blue circle to the center of the blue square. Unless I drag it to the correct position, it should revert to original position.

This is what I have so far:

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

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

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

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

I can't position them the circles to the center of the squares, how can I do that?

解决方案

You can manually snap the items to the center of droppables using jQuery Ui's position() utility method as follows (I changed your logic slightly to avoid repetition of code and 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>

这篇关于jQuery UI拖放到中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！