2010-11-30 5 views
2

업로드 된 jpg가 템플릿에 배치되는 템플릿 시스템을 만들려고합니다.다른 div 아래에 Jquery Draggable 객체가있을 수 있습니까

테스트 예제 :

http://www.silverink.com/TEMP/jqueryTest/

문제 I는 최상위 레이어에 마스크를 가지고 있지만 클릭하고 하위 레이어를 드래그 할 수 있도록하려는 것입니다. 현재 나는이 영역을 클릭하여 앞쪽으로 가져온 다음 드래그하거나 앞쪽을 투명하게해야합니다.

모든 아이디어 나 제안을 환영합니다.

답변

10

실제로 쉬운 방법이있다 : 폐색 요소에 대한 평소와 같이 드래그를 생성하고 드래그에 이벤트를 위임 교합 이미지에 mousedown 이벤트 처리기를 추가 :

$('#occluder').mousedown(function(ev) { 
    $('#draggable').trigger(ev); 
}); 
+0

행크스는 대단히 프로젝트가 끝났지 만 다른 솔루션은 피타 (PITA) 구현을 염두에두고 있습니다. –

+0

이제는 두 개의 div에 대한 기존 솔루션을 통해이를 구현했습니다. 매력을 발휘합니다! –

1

희미한 마스킹을 위해 투명한 png 파일을 사용하고 있으므로 시도하려는 작업을 수행 할 수 없습니다. PNG조차도 중간에 투명하지만 여전히 이미지의 일부이며 아래의 레이어를 차단합니다.

하지만 4 개 개의 파일로 그 PNG로 잘라이 http://jsbin.com/etale4/2/edit

+0

감사합니다, 그 뭔가가 있었다 나는 생각 했었습니다. 이상적으로 우리는 휴대폰의 다른 버전이있을 것이므로 하나의 div를 마스크로 사용하고 싶을 것입니다.하지만 이것이 유일한 방법이라면 플래시 인터페이스를 만드는 것보다 더 낫습니다. –

2

주위를 배치 할 수는 하위 계층의 이미지의 정확한 위치와 크기를 가진 매우 상단에 레이어를 생성하여 해결하기 위해 관리하게한다. 그런 다음 최상위 레이어를 드래그 가능하게 만들고 드래그 기능으로 이미지 레이어의 위치를 ​​업데이트합니다.