Возможно ли иметь Jquery Draggable объект под другим div

Question

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

Пример теста:

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

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

Любые идеи или предложения приветствуются !!

Answer 1

На самом деле существует простой способ: создать перетаскиваемый элемент как обычно для скрытого элемента и добавить обработчик события mousedown на скрывающем изображении, чтобы делегировать событие перетаскиваемому элементу:

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

Answer 2

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

Answer 3

Вы используете прозрачный png-файл для скрытой маскировки, поэтому я не могу сделать то, что вы пытаетесь сделать. Даже png является прозрачным в середине, но он является частью изображения и блокирует слои ниже.

Но вы можете разрезать этот png на 4 разных файла и поместить их вокруг этого http://jsbin.com/etale4/2/edit