javascript - jQuery UI drag and drop snap to center -

javascript - jQuery UI drag and drop snap to center -

i need little help please. need have bluish circle, reddish circle, bluish square , reddish square. need drag reddish circle center of reddish square , bluish circle center of bluish square. unless drag right position, should revert original position.

this have 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 circles center of squares, how can that?

you can manually snap items center of droppables using jquery ui's position() utility method follows (i changed logic avoid repetition of code , css):

class="snippet-code-js lang-js prettyprint-override">$(".draggable").draggable({ revert: 'invalid' }); $(".droppable").droppable({ accept: function(item) { homecoming $(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"); } }); } }); class="snippet-code-css lang-css prettyprint-override">.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; } class="snippet-code-html lang-html prettyprint-override"><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>

javascript jquery jquery-ui drag-and-drop