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',
});

/

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

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/tM7cp/269/

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

• javascript
• jquery
• jquery-ui
• drag-and-drop

2 Answers 2

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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery./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>

Here is an updated example of TJ's response. I created a jQuery plugin that can be called to center the draggable item within the droppable region.

(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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./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>