Какую анимацию / функцию использовать для линейки (пользовательский интерфейс)?

Question

Я создаю футбольную игру и хочу, чтобы мои пользователи могли создавать свою линейку онлайн, не используя тонны javascript.

Я хотел бы, чтобы на левой стороне были указаны имена всех игроков иуказаны позиции, в то время как с правой стороны находятся деления для каждой позиции в линейке для заполнения.

Мои два варианта:

1) Перетащите игроков на свои места насостав

ИЛИ

2) Нажмите на игрока (станет подсвеченным) и щелкните место (имя появляется в линейке, а подсветка исчезает слеваlist)

Какой вариант наиболее прост в использовании И в основном, есть ли у вас пример сценария для анимации, которую вы предлагаете (скажем, для 2 игроков), которую я мог бы использовать в качестве модели (у меня установлен Jqueryна сервере кстати)?Большинство сценариев перетаскивания, которые я нашел в Интернете, были слишком сложными и тяжелыми для чего-то такого простого.

Answer 1

Это зависит от того, насколько вы хотите воспользоваться преимуществами встроенной функциональности DnD, но для портативного решения вы можете посмотреть что-то вроде этой страницы, но я бы изменил ее так, чтобы при нажатии на плеер добавляет обработчик событий mousemove, а mouseup удаляет его.

http://www.java2s.com/Code/JavaScript/Event/MouseDragandDrop.htm

Вы также можете посмотреть на использование Drag and Drop API для браузеров, которые его поддерживают, что было бы проще.

https://developer.mozilla.org/en/dragdrop/drag_and_drop

Но, если вы хотите использовать решение JQuery, оно также будет простым.

Я полагаю, что на основании моего ответа DnD будет лучшим вариантом для пользовательского интерфейса, но его не нужно усложнять, я дал вам три варианта. Лично я со смесью первых двух.

Answer 2

По моему мнению, перетаскивание было бы лучше использовать с точки зрения пользователя.Однако это только мое мнение.

Если вы хотите использовать перетаскивание, посмотрите на jQuery UI .