Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery. Интерактивный ролик. Drag and drop / 1 сообщений из 1, страница 1 из 1
10.04.2016, 11:24
    #39211865
Jarza
Jarza
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
jQuery. Интерактивный ролик. Drag and drop
Здравствуйте, друзья! Сразу извиняюсь за возможные неточности или недочеты в нижеизложенном. Я познакомился с JS всего 3 недели назад.
Задача: есть интерактивный ролик с "drag and drop", сделанный во флеше, в котором нужно перетаскивать и сопоставлять графические элементы с надписями и с помощью кнопки "ПРОВЕРИТЬ" определять правильность сопоставления. Мне нужно с использованием предоставленной графики сделать то же самое, но на html. Пока что я делаю тестовый ролик (Auto-match.html), чтобы понять принцип. Использую Adobe Edge Animate с применением jQuery. Прописывал все в главном слое (Stage).

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

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

Код: javascript
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
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 и мой тестовый ролик https://yadi.sk/d/rNRhNExsqsMEx
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / jQuery. Интерактивный ролик. Drag and drop / 1 сообщений из 1, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]