Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Интерактивный ролик. Drag and drop. Edge Animate (https://javascript.ru/forum/jquery/62416-interaktivnyjj-rolik-drag-drop-edge-animate.html)

Jarza 08.04.2016 23:33

Интерактивный ролик. 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, время: 02:01.