Мне нужно создать футбольное поле, а затем иметь какое-то выпадающее меню, которое выбирает формации (например, 4-4-2, 4-5-1 и т. Д.) И перемещает моих игроков (больше как круги с номер/имя) в этом поле для достижения желаемого образования.Создание динамического футбольного поля
Любые идеи о том, как мне начать?
Как cfv1000 сказал, вы должны смотреть в draggable & droppable в JQuery UI.
Вот начальный момент, который я сделал для вас. Это не близко.
С вашими идентификаторами для вашего элемента (ов), просто позвоните draggable() так:
$("#GKRedTeam").draggable();
$("#GKBlueTeam").draggable();
..и среди многих предстоящих дополнений - создать надлежащие HTML & свойства CSS для него.
Скажем, я буду использовать draggable/droppable. Как сохранить эти позиции, созданные функцией перетаскивания для последующего использования? Поэтому, когда я что-то редактирую, я хочу, чтобы кто-то другой видел то же самое, когда он входил на мою страницу. – moonbas3
Вам нужно сохранить его с помощью файла cookie или что-то в этом роде. Чтобы сделать анимацию элементов с возможностью перетаскивания/перетаскивания автоматически, вы должны заглянуть в анимированные(), offset(), css() и append(). Найдите [ЭТО] (https://stackoverflow.com/questions/12098120/jquery-ui-sortable-move-item-automatically). Или - вы могли бы облегчить себе. Просто создайте раскрывающееся меню и статические изображения, которые меняются при выборе формации в меню. Что-то вроде этого я сделал для вас [** FIDDLE **] (http://jsfiddle.net/stsZn/23/) – urbz
Нет, я не могу просто использовать изображения, это ничего. Я думаю, что я буду хранить координаты (left/top) в моей базе данных и использовать только предопределенные формации. – moonbas3
Используйте http://kineticjs.com/, и вы можете экспортировать изображение после png или сохранить его на сервере (я думаю), если вы хотите повторно использовать все после этого, вы должны сделать объекты с одинаковыми свойствами в PHP и сохранить их в одном базы данных или другой вариант отправки javascript объектов и сохранить его без каких-либо изменений (будьте осторожны с инъекционным кодом), и вам пришлось изменить изображение, которое вы берете на себя объект/информацию с сервера.
Другой вариант - использовать localStorage, если он будет использовать один и тот же браузер все время.
Смотрите пример http://www.html5canvastutorials.com/labs/html5-canvas-shape-tango-with-kineticjs/ (сделайте щелчок в одно изображение для перетаскиваемым)
Это слишком много, я не разрабатываю игру. Спасибо за ответ. – moonbas3
Основным примером является игра, но не только для этого, поскольку круги с номером/именем очень просты, а перетаскиваемая часть - это один из вариантов, поэтому вы можете использовать все, что хотите, и доверять мне проще в использовании. jquerUI + canvas + others – nicearma
Да, но мне нужно изучить его, и я не думаю, что буду использовать его в ближайшем будущем для чего-то.С другой стороны, пользовательский интерфейс jQuery с draggable/droppable подходит для многих вещей, и хотя я никогда не рассматривал его, это похоже на то, что я мог бы использовать в будущем, а также :). – moonbas3
проверить это хранилище jquery-matchcenter
Реализация JQuery интерактивного футбольного поля
Начните с эскиза, а затем попытаться решить это, и если вы наткнетесь на каких-либо проблем вы можете попросить их Вот. –
Я не ищу прямых ответов, просто нужен какой-то головной убор. Я думаю о создании div (мое футбольное поле, фон и многое другое), а затем как-то добавить 11 divs поверх этого (думаю, я буду использовать абсолютное позиционирование). Но как я буду перемещать их с помощью Js/Jquery? Должен ли я менять левый/верхний attr все время? Или есть лучшая практика. – moonbas3
Это хорошее начало. Пойдите для этого и скажите нам, когда вы застрянете с чем-то. Btw. вам не нужен PHP для этого, вы также можете создать контент в javascript. – Paul