Перемещение строк таблицы

@Uzver000 · Регистрация: 20.12.2017

Студворк — интернет-сервис помощи студентам

Всем привет. Я занимаюсь бэкэндом, но столкнулся с проблемой фронта и не знаю как решить.
Смотрите, есть таблица

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

Вот шаблон

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
                             <table class="table table-borderless">
                        <thead>
                            <tr>
                                <th class="cell-small text-center" data-toggle="tooltip" title="Toggle all!"><input type="checkbox" id="check6-ll" name="check6-all"></th>
                                <th class="text-center">#</th>
                                <th>Username</th>
                                <th class="hidden-xs hidden-sm"><i class="fa fa-envelope-o"></i> Email</th>
                                <th class="hidden-xs hidden-sm">Firstname</th>
                                <th class="hidden-xs hidden-sm">Lastname</th>
                                <th class="cell-small text-center"><i class="fa fa-bolt"></i> Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td1" name="check6-td1"></td>
                                <td class="text-center">1</td>
                                <td><a href="javascript:void(0)">username1</a></td>
                                <td class="hidden-xs hidden-sm">user1@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td2" name="check6-td2"></td>
                                <td class="text-center">2</td>
                                <td><a href="javascript:void(0)">username2</a></td>
                                <td class="hidden-xs hidden-sm">user2@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td3" name="check6-td3"></td>
                                <td class="text-center">3</td>
                                <td><a href="javascript:void(0)">username3</a></td>
                                <td class="hidden-xs hidden-sm">user3@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="text-center"><input type="checkbox" id="check6-td4" name="check6-td4"></td>
                                <td class="text-center">4</td>
                                <td><a href="javascript:void(0)">username4</a></td>
                                <td class="hidden-xs hidden-sm">user4@example.com</td>
                                <td class="hidden-xs hidden-sm">Name</td>
                                <td class="hidden-xs hidden-sm">Last</td>
                                <td class="text-center">
                                    <div class="btn-group">
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Details" class="btn btn-xs btn-info"><i class="fa fa-info-circle"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Edit" class="btn btn-xs btn-success"><i class="fa fa-pencil"></i></a>
                                        <a href="javascript:void(0)" data-toggle="tooltip" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-times"></i></a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>

@Уф · 11.02.2019, 17:29

есть в готовом плагине, но коль у тебя интерфейс как я понял на пхп фреймворке генерируется, даже не знаю на сколько уместно будет js добавлять, ты хочешь им также id в базе поменять потом?
https://datatables.net/extensi... imple.html

@Uzver000 · 12.02.2019, 11:37 **[ТС]**

НУ я не знаю... мне просто нужно как-то реализовать такой функционал... вот я и ищу варианты

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	11.02.2019, 17:29
	есть в готовом плагине, но коль у тебя интерфейс как я понял на пхп фреймворке генерируется, даже не знаю на сколько уместно будет js добавлять, ты хочешь им также id в базе поменять потом? https://datatables.net/extensi... imple.html 1

@Uzver000 0 / 0 / 0 Регистрация: 20.12.2017 Сообщений: 42
	12.02.2019, 11:37 [ТС]
	НУ я не знаю... мне просто нужно как-то реализовать такой функционал... вот я и ищу варианты 0