덮여있는 객체에 자바 스크립트 이벤트 가져 오기

Question

고정 된 이미지와 두 번째 드래그 가능한 이미지가있는 jquery 앱을 만들려고합니다. 움직일 수있는 이미지 위에 z- 인덱스를 표시하려면 고정 된 이미지가 필요합니다. 고정 된 이미지는 놀이 공원에서 볼 수있는 것처럼 얼굴에 알파 자르기 구멍이있는 사진입니다. 문제는 움직일 수있는 (얼굴) 이미지가 고정 된 이미지와 겹쳐 지자 마자 클릭 이벤트는 고정 된 이미지 위에 캡처되고 움직일 수없는 이미지에 도달한다는 것입니다. 따라서 더 이상 움직일 수 없습니다. 여기 내 코드가 ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"></script> 

<div id="fixed" style="position:relative; z-index: 2"> 
    <img src="background.png"> 
</div> 

<div id="face" style="position:relative; z-index: 1"> 
    <img src="face.png"> 
</div> 

<script> 
    $(function() { 
     $("#face").draggable(); 
    }); 
</script> 

고정 된 배경 뒤에있을 때 어떻게 얼굴 개체를 드래그 할 수 있습니까? 마우스 이벤트를 수동으로 발사 할 수 있습니까? 그렇다면 jquery-ui draggable()이 제대로 작동하도록 어떻게 호출해야합니까? 어떻게 든 고정 된 이미지를 캡처하여 이벤트를 캡처 할 수 있습니까? 또는 직접 드래그 할 수있는 메커니즘을 작성해야합니까?

Answer 1

나는 당신을 위해 매우 간단한 해결책을 찾았다 고 생각합니다. 기본적으로 특정 조건이 충족 될 때만 이벤트를 릴레이 할 수 있습니다 (예 : #face가 #fixed 아래에 있음). Check out this fiddle for example.

짝수 데이터를 간략하게 살펴보면 draggable은 mousedown 만 바인딩한다는 것을 보여 주므로 릴레이해야 할 유일한 이벤트 인 것 같습니다.

$('#face').draggable(); 

$('#fixed').bind('mousedown', function(e){ 
    // TODO: IF #face is under #fixed AND mouse is over #face THEN 
    $('#face').trigger(e); // trigger the event on face 
}); 

Answer 2

나는 아래쪽의 요소에 "드래그 핸들"을 만드는 것이 더 좋을 것이라고 생각합니다. 드래그가 활성화되어있는 동안에는 항상 표시됩니다. 즉, 드래그 가능한 이미지의 "조이스틱"역할을하는 이미지와 분리 된 별도의 UI 컨트롤을 사용하여 이미지 자체를 수동으로 드래그/드롭하지 않고도 이미지를 이동할 수 있습니다.

생각해보기 : 항목을 맨 위 항목 아래로 드래그 한 다음 놓습니다. 그들은 어떻게 다시 데리러 올까? 놀이 공원에서 볼 수있는 것처럼 얼굴 구멍이 인 것처럼 설명했다면 사용자는 눈에 보이지 않는 요소를 볼 수 없으므로 불가능합니다. 마우스로 해당 요소와 상호 작용할 수 있습니다.