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

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) { 
 
    \t 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>