1

Всем Здравствуйте!Есть форма с картинками: введите сюда описание изображения

Я хочу сделать перетаскивание этих картинок, то есть: Я зажимаю мышку и переношу картинку например на место второй, и вторая встает заместо первой, а первая сдвигается влево. Подскажите хотя бы в какую строну смотреть?Или как такое вообще можно реализовать

4
  • 1
    jqueryui.com/sortable 6 апр 2018 в 6:44
  • Если будете писать все самостоятельно, напишите себе сначала алгоритм, что за чем будет идти и как между собой взаимодействовать. Вы так быстрее поймете что надо делать и в каком порядке. Ну а если вариант, прилепить что-то готовое, то просто подключите jQuery + все необходимое и вперед с песней (но понимания это не добавит, к сожалению). Это я вам из личного опыта говорю. Сейчас делаю так, раньше иначе (результат - дольше выполнял задания). Само действие это Drag’n’Drop.
    – user262779
    6 апр 2018 в 7:16
  • @VladSpirin Мне кажется там дело не сколько в алгоритме, сколько в самом действии перетаскивания картинки. По логике Элементы дом после такой тасовки должны сами встать как и нужно
    – user241679
    6 апр 2018 в 7:18
  • 1
    Вот тут вам и нужен алгоритм. По логике может быть, а если все пойдет не так........????? Продумайте весь механизм этого процесса и у вас будет все работать как швейцарские часы. Как вы будете делать, это конечно ваше дело, я лишь делюсь опытом попадания в мои лужи, вы их можете обойти...., или встать в свои, вам решать. Посмотрите вот тут. Думаю, вам это поможет.
    – user262779
    6 апр 2018 в 7:23

1 ответ 1

0

Привет. Если у тебя картинки достаются из БД, то можно сделать все очень красиво. У картинки будет дополнительное поле типу "weight". На основании которого при выводе будет происходит сортировка. По дефолту поле равно 0.

Вот отличный пример с реализацией, код конечно можно сделать и покрасивей, но это то что тебе нужно.

Короче говоря, когда ты будешь выводить свои картинки, у каждого блока с картинкой должна быть ID с ID картинки в БД, для дальнейшего апдейта в условии WHERE. После того как ты их перетаскивал (drag n drop), на клиенте у тебя будет новая последовательность ID, JavaScript собирает эту последовательность и отправляет аяксом в контроллер, где происходит апдейт таблицы. ну по сути и все)

Тоже самое делал у себя под друпал. Идею брал отсюда, все класно работает.

Фишка в том что здесь можно сортировать grid, а не только таблицы.

Демо Код

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.