Это краткое руководство о том, как сортировать или переупорядочивать элементы на HTML-странице с помощью библиотеки пользовательского интерфейса jQuery. Поначалу эта задача может показаться утомительной, но с помощью jQuery она становится очень простой.
Хорошо, обо всем по порядку. Получите ссылки CDN для библиотеки jQuery и jQuery UI здесь и вставьте их в тег head на своей HTML-странице. Легко!
Я также добавил ссылку на загрузку, но это только для стиля. Вам не нужно добавлять его.
Теперь давайте добавим на страницу некоторый контент, который мы хотели бы изменить или отсортировать.
Я создам родительский div с некоторыми дочерними элементами внутри него. Затем эти дети будут сортироваться между собой. Одноуровневые элементы div можно сортировать только между собой. Однако вы можете объединять элементы из разных родителей или сортировать их друг с другом. Это то, о чем вы можете прочитать здесь и легко реализовать самостоятельно, я сделаю этот пост небольшим, поэтому я не буду вдаваться в подробности здесь.
Учитывая, что вы хотите сортировать только элементы div одного и того же родителя —
Все дочерние элементы первого уровня одного родителя можно сортировать между собой. Точно так же все дочерние элементы первого уровня (только на один уровень ниже — это означает, что все дочерние элементы div должны быть одного уровня внутри родителя, чтобы их можно было сортировать между собой), дочерние элементы любого другого элемента div также будут сортироваться только между собой.
Теперь, чтобы сделать дочерние элементы div сортируемыми, все, что нам нужно сделать, это вызвать встроенную функцию .sortable() для родительского элемента.
Вызовите функцию .sortable() для родительского элемента div, чтобы сделать все его дочерние элементы сортируемыми/перестраиваемыми.
Повторите эту процедуру для любого другого элемента, который вы хотите отсортировать. Просто поместите дочерние элементы div в родительский элемент div и вызовите для него функцию .sortable() внутри скрипта.
Есть много дополнительных опций, которые вы можете настроить, чтобы настроить поведение библиотеки.
Одним из таких вариантов является заполнитель. Это позволяет вам стилизовать местозаполнитель или положение, в котором текущий удерживаемый div будет помещен во время его перетаскивания. Вы добавляете его, передавая его как объект внутри функции .sortable() и добавляя к нему стили в css.
Вот как это выглядит с добавленным заполнителем —
Это все. Вы можете сделать гораздо больше, чем это с библиотекой. Вы также можете объединить детей от разных родителей с помощью дополнительного кода.
Это было краткое и краткое руководство о том, как сортировать или переставлять элементы с помощью jQuery. Дайте мне знать, если это помогло вам в любом случае.
Спасибо!
