Moving an object around the contour of an element

$("document").ready(function() { var prevX = null; var prevY = null; //true = up, false = down var UpDown = null; //true = rigth, left = false var LeftRight = null; $('.box').css("left", 300 + 'px'); $('.box').css("top", 100 + 'px'); $('.box .circle').css("left", 256 + 'px'); $('.box .circle').css("top", 260 + 'px'); $('.box').draggable(); $('.box .circle').draggable({ axis: "y", snap: ".box", snapMode: "outer", drag: function(event, ui) { update(event, ui) }, stop: function() { reset } }); function update(event, ui) { var circle_X = ui.position.left; var circle_Y = ui.position.top; //размеры внешнего div var div_height = $(".box").outerHeight(); var div_width = $(".box").outerWidth(); //размеры круга var circle_height = $(event.target).outerHeight(); var circle_width = $(event.target).outerWidth(); $("li:nth-child(1)").text("CIRCLE SIZE: " + circle_width + "x" + circle_height); $("li:nth-child(2)").text("DIV SIZE: " + div_width + "x" + div_height); $("li:nth-child(3)").text("CIRCLE POS:" + circle_X + "," + circle_Y); //UpDown if (prevY == null) { prevY = event.pageY; } else { if (prevY > event.pageY) { UpDown = true; prevY = event.pageY; } else { UpDown = false; prevY = event.pageY; } } //LeftRight if (prevX == null) { prevX = event.pageX; } else { if (prevX > event.pageX) { LeftRight = false; prevX = event.pageX; } else { LeftRight = true; prevX = event.pageX; } } //####################### if (UpDown) { $("li:nth-child(4)").text("UpDown: UP"); } else { $("li:nth-child(4)").text("UpDown: DOWN"); } if (LeftRight) { $("li:nth-child(5)").text("LeftRight: RIGHT"); } else { $("li:nth-child(5)").text("LeftRight: LEFT"); } // ##################### //верхняя граница var upper_border = -circle_height; //нижняя граница var bottom_border = div_height; //левая граница var left_border = -circle_width; //правая граница var right_border = div_width; //верхняя граница if (upper_border <= circle_Y) { if (left_border <= circle_X | right_border >= circle_X) { if (!UpDown) { $(".circle").draggable("option", "axis", "y"); } else { if (LeftRight != null) { $(".circle").draggable("option", "axis", "x"); } } } } if (bottom_border >= circle_Y) { if (left_border <= circle_X | right_border >= circle_X) { if (UpDown) { $(".circle").draggable("option", "axis", "y"); } else { if (LeftRight != null) { $(".circle").draggable("option", "axis", "x"); } } } } } function reset() { prevX = null; prevY = null; UpDown = null; LeftRight = null; } }); 

 .box { display: inline-block; height: 260; width: 256; } .circle { display: inline-block; position: absolute; border: 1px solid black; border-radius: 50px; } .myclass { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div class="box"> <img src="https://www.gravatar.com/avatar/1d63440848ca3eaa0a55ed77a2300997?s=64&d=identicon&r=PG&f=1"> <div class="circle">123</div> </div> <div> <li></li> <li></li> <li></li> <li></li> <li></li> </div>