Здравствуйте, друзья! Сразу извиняюсь за возможные неточности или недочеты в нижеизложенном. Я познакомился с JS всего 3 недели назад.
Задача: есть интерактивный ролик с "drag and drop", сделанный во флеше, в котором нужно перетаскивать и сопоставлять графические элементы с надписями и с помощью кнопки "ПРОВЕРИТЬ" определять правильность сопоставления. Мне нужно с использованием предоставленной графики сделать то же самое, но на html. Пока что я делаю тестовый ролик (Auto-match.html), чтобы понять принцип. Использую Adobe Edge Animate с применением jQuery. Прописывал все в главном слое (Stage).
Прописал draggable для перетаскиваемых элементов. Создал невидимые прямоугольники, обозначающие области, заходя на которые draggable элемент при отпускании кнопки мыши либо возвращается на исходную позицию ("origPosition"), либо "магнитится" к ближайшей конечной ячейке рядом с надписью ("finalPosition") в зависимости от того, на территории какого прямоугольника он окажется на момент отпускания кнопки мыши.
Код для одного элемента. С остальными по той же схеме:
yepnope({nope:['jquery-ui-1.10.4.custom.min.js'], complete: init});
function init(){
sym.$('Element').draggable();
sym.$("origPosition").droppable({
accept: sym.$("Element"),
drop: function(){
sym.$("Element").animate({"left": "429px", "top": "224px"}, "fast");
}
});
sym.$("finalPosition").droppable({
accept: sym.$("Element"),
drop: function(){
sym.$("Element").animate({"left": "1139px", "top": "510px"}, "fast");
}
});
}
Не знаю, как выполнить следующие задачи:
1) Чтобы draggable элементы были, так сказать, “always on top” во время перетаскивания.
2) Чтобы несколько элементов не попадали на одну и ту же конечную ячейку, если она уже занята другим элементом.
3) И самое главное. Создание проверочной кнопки, которая будет выдавать 2 варианта диалоговых окон в зависимости от того, правильно или неправильно сопоставлены элементы (я так понимаю, это тоже нужно прописывать через конечные координаты).
Очень прошу помочь информацией. Ссылка на урок/видеоурок/раздел учебного пособия тоже сойдет.
P.S. Прикрепляю пример в .swf и свой тестовый ролик.
