Доброго времени суток.

Хотел создать тему вчера, но нашел ссылку на статью (drag&drop), прочитал, реализовал и все круто - работает. При этом взял конкретное число объектов и сделал то, что мне нужно.

Решил по аналогии сделать в нужном мне месте, появились проблемы. Вот понять и не могу в чем проблемы, может быть в CSS, а может и в JavaScript.

Задание: написание теста, конкретно реализация типа вопроса - сопоставить пары ответов, хочется, чтобы пользователь перетаскивал прямоугольники с текстом.

Как работает: есть контейнер (<div>), в нем n-ое количество пар (<span>), каждому из них присваиваются уникальные id. Когда перетаскиваем <span>'ы , при отпускании кнопки мыши если они в пределах <div>, то срабатывает обработка их координат (т.е. загоняем индексы id <span>'ов и упорядочиваем по координате (top), далее расставляем в новом порядке на прежние места, т.е. пары в левом столбике всегда там и останутся, в правом также, только порядок следования по вертикали меняется)

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

Проблема 1: при изменении разрешения экрана блоки <span> начинают упорно убегать. Сделал как надо, но только для одного разрешения (1280 на 800). В нескольких местах добавил при вычислении координат (+-100 и +-150). В коде все убрал, чтобы была видна проблема.
Возможно связано с центрированием страницы,
возможно со значениями свойства position у div'ов.
Прилагаю код странички (выкинул все лишнее, чтобы была как можно меньше)

Все равно 200 строк осталось.
Файлы скриптов (которых в файле нет) стандартны и мной не изменялись.

Проблема 2: при перетаскивании <span>, естественно заходит за другой <span>, который был отрисован позже. 
Возможно ли как-то программно менять уровень слоя при начале переноса элемента на более высокий (верхний), чтобы элемент (<span>) при перетаскивании скользил над остальными, либо нужно создавать копию элемента (естественно она будет выше остальных, т.к. создана последней), а сам элемента на время перетаскивания прятать?

Это сообщение отредактировал(а) pushok - 6.3.2014, 18:06

Тихо здесь...

Проблему решил:

1. При выравнивании блоков (<div>) использую в стилях следующий способ:

left: 10%;
right: 10%;
min-width: 500px;
margin: 0 auto;

2. Проблему со сдвигом элементов и курсора мыши по вертикали, решил заданием координат относительно 2го блока (id="content"). Не знаю почему именно оттуда координаты берутся, но видимо где-то в статьях упустил, что при абсолютном позиционировании блоков вложенных в блоки без абсолютного позиционирования, координаты вложенных (top, left) считаются относительно родительского блока (т.е. при нулевом значении top он цепляется к верхней границе родителя).

3. Проблему со сдвигом элементов по вертикали решил аналогично, а вот сдвиг курсора по вертикали, чуток по-другому: при вычислении координат курсора вычитаю вычисленные 20% от ширины страницы (по 10% с каждой стороны)