jQuery UI draggable containment area가 화면 크기와 함께 변경됩니다.

작은 div 내에있는 큰 이미지가 있습니다. div에는 position:absolute; top:10px; left:10px; width:563px; height:563px; z-index:200; overflow:hidden이 적용되어 이미지의 일부만 보입니다. 사업부 나는 그것이 사업부 주위를 끌고 있지만, 이미지의 바깥 쪽 가장자리는 외부 넘어 통과 결코 될 수 있다는 것을 의미한다 이미지에 $('#theImage').draggable({cursor: 'move', containment: [-523,-738,361,146]});을 적용한 width:1000px; margin:0 auto; position:relative;jQuery UI draggable containment area가 화면 크기와 함께 변경됩니다.

와 화면 페이지를 중심으로 다른 사업부 내에있는 div의 가장자리. (즉, 이미지의 왼쪽 가장자리는 div의 왼쪽 가장자리를 넘어 끌 수 없습니다. 오른쪽, 위쪽 및 아래쪽 가장자리에도 동일하게 적용됩니다.) 따라서 이미지는 항상 div를 채 웁니다. 배경이 보이지 않습니다.

브라우저가 최대화되었을 때 제대로 작동하지만 그렇지 않을 때 변경됩니다. - 포함 된 것으로 가정합니다. X 및 Y 값은 상위 창이 아닌 브라우저 창에서 계산됩니다. div에서 계산되도록 강제 할 수있는 방법이 있습니까? (이미지의 각 가장자리를 이제 div의 반대쪽 가장자리까지 드래그 할 수 있으므로 포함을 '부모'로 설정하는 것은 효과가 없습니다.

출처

2012-05-18 Dorian Fabre

모든 기회를! jsfiddle.net에서 데모를 만들 수 있으므로 처음에는 문제를 직접 살펴보고 lorempixel.com의 크기에 상관없이 자리 표시 자 이미지를 사용할 수 있으며 jquery ui css und 어 리소스 – xec

내 웹 사이트의 드래그 가능한 이미지를 사용하여 [jsfiddle] (http://jsfiddle.net/dorianfabre/2EZ4A/)에서 데모를 만들었습니다. 결과 패널이 너비의 절반이고 내 1600x1200 모니터의 높이의 절반이 넘게되도록 화면 패널이 설정되면 이미지는 div 내에서 완벽하게 스크롤됩니다. 그러나 바이올린 패널 (또는 브라우저 윈도우)의 크기를 변경하면 이미지가 가장자리로 완전히 스크롤되거나 너무 멀리 이동하여 배경이 흰색으로 표시됩니다. 어떤 아이디어? –

저도 같은 문제를 겪고 여기에 나는 그것을 해결하는 방법입니다.

이

var windowX = $(window).width(); //determines the width of the browser window 
var windowY = $(window).height();//determines the height of the browser window 
var imageX = 2000; //put the width of your image here. my image was 2000x1000 
var imageY = 1000;//image height 
$("#theImage").draggable({ containment: [(windowX - imageX),(windowY - imageY),0,0] });

마지막 줄 왼쪽 상단 모서리와 브라우저의 너비/높이 사이에 이미지를 포함하는 희망이 도움이

출처

2014-11-20 20:03:43

jQuery UI draggable containment area가 화면 크기와 함께 변경됩니다.

답변

관련 문제