왜 내 드래그 가능한 스냅 유형 : 내부, 외부 스냅?

Question

나는 draggable에 이상한 문제가 있습니다. 여기 JSFiddle를 참조하십시오 http://jsfiddle.net/c6L9rLxt/1/

내 코드는 다음과 같습니다

는

$('.element').draggable({ 
    appendTo: "body", 
    snap: ".x-guide, .y-guide", 
    snapMode: "inner", 
    stop: function(event, ui) { 
     $('.x-guide').css("top", $('.element').css("top")); 
     $('.y-guide').css("left", $('.element').css("left")); 
    } 
}); 

그래서 일이 원하는 것을, 나는 .x-guide 및 .y-guide의 내부에 스냅 내 드래그를 원하는 것입니다. 그렇게 성공적으로 수행하지만, .x-guide 또는 .y-guide의 ouside에 가까이 끌면 부모 div에 스냅됩니다.

내가 말하는 의미를 확인하는 가장 좋은 방법은 직접 시도하는 것입니다. JSFiddle로 이동하여 요소를 가운데 위치로 끕니다. 그런 다음 요소를 빨간색 선의 바깥쪽으로 드래그하십시오. 너는 .container div의 국경에 짤깍 소리를냅니다. 이 현상은 빨간 선이 가까이있을 때만 발생합니다. 그것은 .container div의 경계에서 도처에서 일어나지 않습니다.

참조 이미지 :

편집 : 누군가가 대신 정지 기능의 드래그 기능을 사용하기 위해 제안 답을 썼다. 그것은 도움이되지 않습니다, draggable 요소는 여전히 컨테이너의 가장자리에 스냅. 유일한 차이점은 빨간색 선도 움직입니다. 그러나 컨테이너에 스냅 여전히 거기에 있습니다. 그 저자는 대답을 삭제했습니다.

Answer 1

이 이유는 snapMode: "inner"이 div의 가운데로 스냅한다는 것을 의미하지 않기 때문입니다. 그것은 div의 구석에 스냅합니다. 여기에 아주 명백한 방법으로 보여주는 예가 있습니다. http://jsfiddle.net/CbESD/3/

(회색 상자 중앙에 빨간색 상자를 놓으십시오. 불가능하고 옆으로 스냅이 표시됨).

위 질문에서 snap-div는 width: 100% 또는 height: 100%입니다. Dropable/draggable은이 대답의 jsfiddle 에서처럼 내부 테두리에 스냅됩니다.

이 동작을 비활성화 할 수없는 것처럼 보입니다. 누군가가 snap-div의 측면에 맞추지 못하게하는 방법을 알고 있다면 그것을 배우는 것을 좋아할 것입니다. 그러나 모든 나의 연구 및 테스트에서, 그것이 행동하는 방식 일뿐입니다.