jQuery UI draggable : 포함 및 snapTo 계산에 다른 요소 사용

Question

둘 다 요소를 드래그해야합니다. 단순화 된 마크 업은 다음과 같습니다.

<div class="wrapper"> 
    <img class="item" src="foo.jpg" /> 
    <ul class="buttons"> 
     <li>Crop</li> 
     <li>Resize</li> 
    </ul> 
</div> 

해당 요소는 영역에 포함되어야하며 해당 영역의 특정 요소에 스냅해야합니다. 문제는 draggable을 포함시켜야하는 방법을 계산할 때 .item이 아니라 .wrapper이 아닌 것을 볼 수있게하려는 것입니다. 버튼 영역이 약간 밖에 위치하기 때문에 .item.

.item에서 draggable을 사용하는 경우 .wrapper은 움직이지 않습니다.

.wrapper에서 draggable을 사용하는 경우, 봉쇄에 사용 된 요소의 상단, 하단 또는 하단에 .item을 완전히 배치 할 수 없습니다.

간체 코드 :

$('.wrapper').draggable ({ 
    containment: '.page', 
    snap: '.page-grid', 
    snapMode: 'inner', 
    snapTolerance: 20 
}); 

아무도이 문제를 해결하는 방법에 대한 아이디어가 있습니까? 귀하의 도움을 크게 주시면 감사하겠습니다.

Answer 1

랩퍼에 overflow:hidden이 적용되어 있지 않으면 랩퍼가 항목과 정확하게 동일하게 측정됩니다. bottom:-5px과 같은 음수 값으로 버튼을 배치 할 수 있습니다. 이렇게하면 래퍼에 약간의 패딩이 붙어있는 것처럼 같은 방법으로 머무르게됩니다.

#wrapper{ padding:0 } 
.buttons{position:absolute; bottom:-5px;right:-5px}