Получение событий javascript для объекта, который скрыт

Question

Я пытаюсь создать приложение jquery, в котором у меня есть фиксированное изображение и второе перетаскиваемое изображение.Мне нужно фиксированное изображение для отображения z-index поверх подвижного изображения - фиксированное изображение - это изображение с вырезанным отверстием альфа для лица, которое вы можете найти в парке развлечений.Проблема заключается в том, что как только подвижное изображение (лицо) перекрывается с фиксированным изображением, события щелчка и перетаскивания фиксируются неподвижным изображением, которое находится сверху, и не попадают на подвижное изображение.Так что он больше не может двигаться.Вот мой код ...

<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). Проверьте эту скрипку, например, .

Быстрый просмотр четных данных показал, что перетаскиваемый объект связывает только 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

Думаю, вам лучше создать некий «дескриптор перетаскивания» для элемента под ним, который всегда будет виден (по крайней мере, при включенном перетаскивании).Это или отдельный элемент управления пользовательского интерфейса, отделенный от изображений, который будет действовать как «джойстик» для перетаскиваемого изображения, так что вы можете перемещать изображение без необходимости перетаскивать само изображение.

Подумайте оэто: допустим, они перетащили элемент под верхний элемент, а затем бросили его;как они поднимают это снова?Если это настройка, как вы объяснили ( вырезанное отверстие для лица, которое вы можете найти в парке развлечений ), то пользователь не сможет увидеть элемент под ним, и, как таковой,для них было бы невозможно взаимодействовать с этим элементом с помощью мыши.