Здравствуйте, читатели! Сегодня в этом блоге вы узнаете, как создать список перетаскивания с использованием HTML CSS и JavaScript. Ранее я поделился блогом о том, как создать адаптивную анимацию счетчика при прокрутке с использованием HTML, CSS и jQuery, а теперь пришло время создать перетаскиваемый список в JavaScript с помощью SortableJS.
Перетаскивание – это жест маркирующего устройства, при котором пользователь выбирает виртуальный объект, "хватая" его и перетаскивая в отдельную область или на другой виртуальный объект. Sortable JS – это библиотека Javascript, которая позволяет сортировать или изменять порядок списков путем перетаскивания элементов списка.
В этой программе [Drag & Drop List или Draggable List] на веб-странице есть пять списков или карточек, и это элементы или списки, которые можно перетаскивать. Пользователи могут легко переупорядочивать элементы в списке недопоставленных, предоставляя пользователям визуальное измерение конкретных действий и модификаций. Если вам трудно понять, что я говорю. Вы можете посмотреть полный видеоурок по этой программе [Drag & Drop List или Draggable List].
Видеоруководство по перетаскиванию списка или перетаскиваемому списку
В видео вы видели список перетаскивания или перетаскиваемый список и то, как мы можем легко изменить порядок элементов в неупорядоченном списке. Надеюсь, вы поняли коды, лежащие в основе создания этой программы. Как вы знаете, чтобы сделать элемент перетаскиваемым, я использовал JavaScript библиотеку SortableJS, поэтому для JavaScript нет обширных кодов.
Мы также можем создать этот тип перетаскиваемой карты с помощью чистого JavaScript без использования каких-либо библиотек или плагинов, но здесь нам нужно больше кодировать. Итак, используя эту библиотеку, мы можем легко создавать эти карты или списки, которые можно перетаскивать.
Перетаскиваемый список или перетаскиваемый список [Исходные коды]
Чтобы создать эту программу (Drag & Drop Card или Draggable Card). Во-первых, вам нужно создать два файла: один файл HTML, а другой — файл CSS. После создания этих файлов просто вставьте следующие коды в свой файл. Вы также можете скачать файлы исходного кода по данной ссылке. Нажмите здесь, чтобы загрузить файлы с исходным кодом.
Спасибо за посещение, продолжайте посещать.
Первоначально опубликовано на https://www.codingnepalweb.com 19 ноября 2020 г.
