Здравствуйте, друзья! Сразу извиняюсь за возможные неточности или недочеты в нижеизложенном. Я познакомился с JS всего 3 недели назад.
Задача: есть интерактивный ролик с "drag and drop", сделанный во флеше, в котором нужно перетаскивать и сопоставлять графические элементы с надписями и с помощью кнопки "ПРОВЕРИТЬ" определять правильность сопоставления. Мне нужно с использованием предоставленной графики сделать то же самое, но на html. Пока что я делаю тестовый ролик (Auto-match.html), чтобы понять принцип. Использую Adobe Edge Animate с применением jQuery. Прописывал все в главном слое (Stage).

Прописал draggable для перетаскиваемых элементов. Создал невидимые прямоугольники, обозначающие области, заходя на которые draggable элемент при отпускании кнопки мыши либо возвращается на исходную позицию ("origPosition"), либо "магнитится" к ближайшей конечной ячейке рядом с надписью ("finalPosition") в зависимости от того, на территории какого прямоугольника он окажется на момент отпускания кнопки мыши.

Код для одного draggable элемента:




Не знаю, как выполнить следующие задачи:
1) Чтобы draggable элементы были, так сказать, “always on top” во время перетаскивания.
2) Чтобы несколько элементов не попадали на одну и ту же конечную ячейку, если она уже занята другим элементом.
3) И самое главное. Создание проверочной кнопки, которая будет выдавать 2 варианта диалоговых окон в зависимости от того, правильно или неправильно сопоставлены элементы (я так понимаю, это тоже нужно прописывать через конечные координаты).

Очень прошу помочь информацией. Ссылка на урок/видеоурок/раздел учебного пособия тоже сойдет.
P.S. Пример в .swf и мой тестовый ролик https://yadi.sk/d/rNRhNExsqsMEx