상자 주위를 움직이는 드래그 가능한 텍스트의 유효성을 검사하는 방법은 무엇입니까?

Question

위쪽, 왼쪽, 오른쪽 및 아래를 터치하기 전에 드래그 가능한 텍스트의 유효성을 검사해야합니다. 전에 박스 안에 1px 여백 경계를 알려야합니다. 1px 여백 다음에 움직여서는 안됩니다. 어떻게 자바 스크립트 또는 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>