How to validate the draggable text moving around the boxes?

Question

I have to validate the draggable text before touching the top, left, right and bottom. Before i have to alert the user with 1px margin border inside the box. It should not move after that 1px margin. How to achieve it using javascript or jquery?

https://jsfiddle.net/uf44m36j/1/

 $('.dragme').draggable({ containment: ".drag-parent" });

Answer 1

If I didn't misunderstand it, you want to notify user before the rectangle hits the border, don't you? You can use drag event for this case, and identify the position in it.

Documentation: http://api.jqueryui.com/draggable/#event-drag

Here is the JsFiddle: https://jsfiddle.net/yusrilmaulidanraji/uf44m36j/2/

  $('.dragme').draggable({ containment: ".drag-parent", drag: function( event, ui ) { if (ui.position.top == 1) { //tell user the box almost hits the top } if (ui.position.left == 1) { //tell user the box almost hits the left } } }); 

 .dragme { border-radius: 0.5em; width: 12em; height: 8em; padding: 1em; font-family: "Montserrat", "Arial"; background-color: #00C5CD; color: white; } .drag-parent { border: 0.1em solid #BA064E; width: 45em; height: 20em; } 

 <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script> <link href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet"/> <div class="drag-parent"> <div class="dragme">Drag me!</div> </div>