JQuery UI — перетаскивание картинки под другой

Необходимо реализовать возможность перетаскивать картинку но так, что-б над картинкой, которую перетаскиваем располагалась другая полупрозрачная на JQuery UI

з-индексами у меня вышло расположить обе картинки так, что-бы перетаскиваемая находилась с краю верхней.
И при перемещении соответственно она легко переносится под другой верхней если за нее взяться с края.

Но необходимо, что перетаскиваемая картинка изначально была в центре неподвижной полупрозрачной верхней

Можно ли такое сделать ?

Наглядный пример лучше тысячи слов...

Наверное что-то вроде такого

$(function() {

	$( "#верхняя_картинка" ).click( function (е) {

		//определяем координаты мыши через e.pageX, e.pageY, e.clientX, e.clientY

		//если мы над нижней картинкой, то

		$( "#нижняя_картинка" ).draggable();

	})

});

r0b1n, вот например ссылка
Если загрузить любую свою картинку то она будет находится под основным изображением.
Это можно заметить на границах так как основное изображение посредине прозрачное в данном случае.

Цитата ("elosoft"):

Наверное что-то вроде такого

Ну я приблизительно вот так уже и реализовал.

Но мне не совсем нравится такая реализация.


Хотя если других идей и быть не может то тема исчерпана...

Цитата ("mirekua"):

Если загрузить любую свою картинку то она будет находится под основным изображением.

Пример не смотрел, но может быть после загрузки загруженной картинке присваивать з-индекс больший, чем максимальной найденный на странице?

Цитата ("AlekartRu"):

но может быть после загрузки загруженной картинке присваивать з-индекс больший, чем максимальной найденный на странице?

Так загруженная картинка должна быть под изображением товара :o Или я чего- то не понимаю ?
То есть так и должно быть - Цитата:

Если загрузить любую свою картинку то она будет находится под основным изображением

Цитата ("mirekua"):

Так загруженная картинка должна быть под изображением товара Или я чего- то не понимаю ?

Наоборот конечно. При загрузке присваивать з-индекс=1, при этом заранее всем остальным элементам на сайте присвоить больший з-индекс. Если несколько картинок загружаются, то первой загруженной присваивайте з-индекс=100 и затем по убыванию, т.к. маловероятно, что будут загружать более 100 картинок без перезагрузки страницы за один раз.

Цитата ("AlekartRu"):

Наоборот конечно.

Как потом перетаскивать картинку с меньшим z-index ?

Вот в чем вопрос © Гамлет

Кстати нашлось свойство - pointer-events

И проблема решается супер просто присвоением верхней картинке pointer-events: none

Но не работает в IE и в опере у меня не хочет работать.

Цитата ("mirekua"):

Кстати нашлось свойство - pointer-events

Цитата:

Warning: The use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.

Так может существует какая-то библиотека JQuery реализующая функционал подобный pointer-events ?

Вот еще интересно - если поставить обработчик на верхнее изображение как и предложил elosoft

$("верхняя картинка").live("mousedown", function(e) { 

evt = e || window.event;

$(this).css({display:'none'});


starter = document.elementFromPoint(evt.clientX, evt.clientY);


$(this).css({display:''});


$(starter).trigger(e);

});

То нижнее изображение можно таскать, а также прекрасно срабатывают и другие обработчики нижней картинки кроме resizible

При попытке изменить размер вся картинка (нижняя) лишь немного (на миллиметр) прыгает в браузере но больше ничего не происходит.

Что может требоваться еще для срабатывания плагина resizible ?