Интерактивный ролик. Drag and drop. Edge Animate
Вложений: 1
Здравствуйте, друзья! Сразу извиняюсь за возможные неточности или недочеты в нижеизложенном. Я познакомился с 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 и свой тестовый ролик. |
Часовой пояс GMT +3, время: 04:55. |