如何驗證在框中移動的可拖動文本？

Question

在觸摸頂部，左側，右側和底部之前，我必須驗證可拖動文本。 在我必須用框內的1px邊距邊框警告用戶之前。 在1px保證金之后它不應該移動。 如何使用javascript或jquery實現它？

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

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

Answer 1

如果我沒有誤解它，你想在矩形撞到邊框之前通知用戶，不是嗎？ 您可以對此案例使用拖動事件，並標識其中的位置。

文檔： http ： //api.jqueryui.com/draggable/#event-drag

這是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>