HTML+CSS+JavaScript

Подключил draggable (скачал тут -http://jqueryui.com/download) для того чтобы можно было перетаскивать изображение в определенном блоке. Изображение перетягивается хорошо но если над ним слой у которого больший z-index, тогда нижний слой с изображением не перетаскивается. Скажите пожалуйста как можно сделать так чтобы при нажатии на верхний слой (с большим z-index) было воздействие на нижный слой?

Примем как сейчас работает можно посмотреть тут -
http://www.vlb.org.ua/new/DRAGGABLE1.7.3/jquery-ui-1.7.3.custom/development-bundle/demos/draggable/mytest.php

Всё примитивно:
- отслеживаете опускание кнопки мыши по документу;
- определяете фактическое положение передвигаемой картинки в момент опускания кнопки мыши;
- если мышь в этот момент над картинкой, подключаете функцию движения;
- при отпускании кнопки мыши функцию движения отключаете.

На чистом JScript'e это всё реализуется в 10-15 строчек кода.

Но для Вас, как я понимаю, нужно именно с jquery, ибо без этих "костылей" Вы свою жизнь уже не представляете.
А с этим я Вам помочь не могу, ибо сам не пользую и другим не рекомендую.

Мне подойдет решение и без jquery просто сам скрипт который перетягивает написан на jquery. Но ведь jquery этот тот же самый javascript так что думаю это не проблема. Буду очень благодарен за пример в javascrpt

Смотрите http://codecenter.awardspace.com/teleparus.html

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

И, заметьте, - ни один z-index не пострадалне использовался :-)

О. Спасибо.

[поправлено модератором]

[поправлено модератором]

Ок. Еще раз большое спасибо.

Еще есть вопрос -
В конце я изменил код так -

<div style="position:relative" style="height:200px;"> <br><br> </div> <div style="position:relative"> <div id="iLIMIT"></div> <img id="iPARUS" src="/img/timg/977.png" ondragstart="return false"> <div id="iTELEF"></div> </div>

я поместил дивы в контейнер - <div style="position:relative"> и выше дивов добавил еще один див с высотой на 200px. При таком раскладе когда я начинаю перемещять картинку. Картинка смещяется на 200px пикселов ниже чем она должна быть(то есть появляется смещение от дива с бордером). Скажите пожалуйста, что нужно сделать чтобы перемещалось только в диве с бордером без смещение и при таком раскладе.

[поправлено модератором]

Не смогли бы Вы выложить Ваш вариант на тот же (или иной) адрес в сети - а то я как-то плохо себе представляю Вашу новую проблему.

[Как-то я поздно заметил обновление в этой теме.]

Cпасибо, что написали. Я выставил тут - http://freesoftspace.com/new/untitled1.php.
То есть моя цель такая чтобы я мог поместить этот код во вложенный див или в таблицу и при движение парус всеравно оставался в пределах дива в котором он должен перемещаться.
Изначально как загрузить документ картинка не смещается. Но когда начать двигать парус он сразу смещается ниже чем нужно.

В общем, если объяснить очень по-простому, то проблема заключается в том, что по уму элементы с абсолютным позиционированием как бы нельзя помещать внутрь элементов с относительным позиционированием.

Но, раз уж Вы собираетесь так делать, то можно это дело откорректировать.

Для этого:

1) Тому элементу, внутрь которого будете помещать три элемента (iLIMIT, iPARUS, iTELEF) - а это у вас может быть див или ячейка таблицы (а в принципе - ЛЮБОЙ блочный элемент) надо присвоить свой уникальный id.
Для выложенного у Вас кода пусть это будет так:

<div id="iSHELL" style="position:relative; height=500px;">

2) Внутрь скриптового блока (положим, непосредственно перед закрывающим тегом </script>) надо поместить следующие пять строк:

onload = function () { var obj = document.getElementById ('iSHELL');    while (obj.offsetParent){correctT -= obj.offsetTop; correctL -= obj.offsetLeft; obj = obj.offsetParent} }

3) Самую первую строку внутри скриптового блока (сразу после открывающего тега <script>) надо дополнить так, чтобы получилось:

var limitL, limitR, limitT, limitB, deltaX, deltaY, correctL = correctT = 0;

4) Внутри двух функций надо найти две одинаковые строки:

var parusL = parusT = 0, obj = document.getElementById ('iPARUS');

, которые обе следует заменить на новые одинаковые:

var parusL = correctL, parusT = corrrectT, obj = document.getElementById ('iPARUS');

5) Ну и напоследок следует найти одну строку

limitL = limitT = 0, obj = document.getElementById ('iLIMIT');

, которую надо заменить на новую:

limitL = correctL; limitT = correctT; var obj = document.getElementById ('iLIMIT');

И всё будет работать как надо.

Cпасибо. Заменил строки тут - http://freesoftspace.com/new/untitled1.php. Только к сожалению не работает. Движение картинки теперь не работает. Фаирфокс выводит такую ошибку - Ошибка:
corrrectT is not defined
Источник: http://freesoftspace.com/new/untitled1.php
Строка: 16

К сожалению мои познания в javascript пока слабенькие поєтому мне трудно понять как исправить

Во-первых, Вы не исполнили пункт под номером 1.

Замените <div style="position:relative; height=500px;"> на <div id="iSHELL" style="position:relative; height=500px;">

Во-вторых, в новой строке

var parusL = correctL, parusT = corrrectT, obj = document.getElementById ('iPARUS');

я допустил описку - случайно УТРОИЛ букву r.
Надо correctT (с двумя r).
Исправьте. В двух местах.

В-третьих, у Вас почему-то вместо "точки с запятой" в другой новой строке прописалась запятая.
Исправьте на

limitL = correctL; limitT = correctT; var obj = document.getElementById ('iLIMIT');                  ^                  |              Вот здесь

-----------------------
UPDATE: Кстати, только сейчас заметил - в самой первой функции (под названием funcCOORD) надо изменить строку на

var parusL = parusT = 0, obj = document.getElementById ('iPARUS'); eX -= correctL; eY -= correctT;

- иначе курсор типа MOVE не совпадает с областью картинки с парусником.

Еще раз огромное спасибо. Вы мне очень помогли. На данный момент все работает