One place for hosting & domains

      создание

      Создание стилей панелей прокрутки с помощью CSS


      Введение

      В сентябре 2018 г. комитет W3C в документе CSS Scrollbars определил спецификации настройки внешнего вида панелей прокрутки с помощью CSS.

      В 2020 году 96% пользователей Интернета запускали браузеры, поддерживающие стили панелей прокрутки CSS. Однако, чтобы реализовать поддержку Blink, WebKit и браузеров Firefox, нужно написать два набора правил CSS.

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

      Предварительные требования

      Для понимания этой статьи вам потребуется:

      Создание стилей панелей прокрутки для Chrome, Edge и Safari

      Для создания стилей панелей прокрутки для Chrome, Edge и Safari требуется псевдоэлемент -webkit-scrollbar с префиксом поставщика.

      Вот пример с использованием псевдоэлементов ::-webkit-scrollbar, ::-webkit-scrollbar-track и ::webkit-scrollbar-thumb:

      body::-webkit-scrollbar {
        width: 12px;               /* width of the entire scrollbar */
      }
      
      body::-webkit-scrollbar-track {
        background: orange;        /* color of the tracking area */
      }
      
      body::-webkit-scrollbar-thumb {
        background-color: blue;    /* color of the scroll thumb */
        border-radius: 20px;       /* roundness of the scroll thumb */
        border: 3px solid orange;  /* creates padding around scroll thumb */
      }
      

      Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

      Снимок экрана примера веб-страницы с персонализированной синей панелью прокрутки на оранжевом фоне.

      Данный код работает с последними версиями браузеров Chrome, Edge и Safari.

      К сожалению, данная спецификация была формально отменена W3C, и, вероятно, со временем ее перестанут использовать.

      Создание стилей панелей прокрутки в Firefox

      Для создания стилей панелей прокрутки для Firefox используются новые CSS Scrollbars.

      В этом примере используются свойства scrollbar-width и scrollbar-color:

      body {
        scrollbar-width: thin;          /* "auto" or "thin" */
        scrollbar-color: blue orange;   /* scroll thumb and track */
      }
      

      Это снимок экрана панели прокрутки, созданной с помощью этих правил CSS:

      Снимок экрана примера веб-страницы с персонализированной синей панелью прокрутки на оранжевом фоне.

      Эта спецификация похожа на спецификацию -webkit-scrollbar способом контроля цвета панели прокрутки. Однако в настоящее время отсутствует поддержка заполнения и округления курсора.

      Создание готовых к будущему стилей панели прокрутки

      Вы можете писать код CSS так, чтобы он поддерживал и спецификацию -webkit-scrollbar, и спецификацию CSS Scrollbars.

      В этом примере используются свойства scrollbar-width, scrollbar-color, ::-webkit-scrollbar, ::-webkit-scrollbar-track, ::webkit-scrollbar-thumb:

      /* Works on Firefox */
      * {
        scrollbar-width: thin;
        scrollbar-color: blue orange;
      }
      
      /* Works on Chrome, Edge, and Safari */
      *::-webkit-scrollbar {
        width: 12px;
      }
      
      *::-webkit-scrollbar-track {
        background: orange;
      }
      
      *::-webkit-scrollbar-thumb {
        background-color: blue;
        border-radius: 20px;
        border: 3px solid orange;
      }
      

      Браузеры Blink и WebKit игнорируют правила, которые они не распознают, и применяют правила -webkit-scrollbar. Браузеры Firefox игнорируют правила, которые они не распознают, и применяют правила CSS Scrollbars. Когда в браузерах Blink и WebKit полностью перестанет использоваться спецификация -webkit-scrollbar, они постепенно перейдут на новую спецификацию CSS Scrollbars.

      Заключение

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

      Также существует возможность моделирования панели прокрутки. Для этого нужно скрыть панель прокрутки по умолчанию и использовать JavaScript для определения высоты и положения прокрутки. Однако эти подходы связаны с ограничениями в таких случаях, как инерционная прокрутка (например, замедление движения при прокрутке с использованием трекпада).

      Если вы хотите узнать больше о CSS, на нашей странице тем по CSS вы найдете полезные упражнения и проекты по программированию.



      Source link

      Создание эффекта многоуровневого скроллинга с помощью чистого кода CSS в Chrome


      Введение

      Код CSS — это мощный инструмент, который вы можете использовать для создания многих продвинутых функций пользовательского интерфейса. В прошлом эти функции использовали библиотеки JavaScript.

      В этом учебном модуле вы настроите несколько строк кода CSS для создания эффекта многоуровневого скроллинга на веб-странице. В качестве замещающих фоновых изображений мы будем использовать изображения с сайта placekitten.com.

      После завершения учебного модуля мы получим веб-страницу с кодом CSS, реализующим эффект многоуровневого скроллинга.

      Предупреждение. В этой статье описываются экспериментальные свойства CSS, доступные не во всех браузерах. Этот проект протестирован в браузере Chrome и работает в нем. Данная методика не очень хорошо работает в браузерах Firefox, Safari и iOS в связи с некоторыми оптимизациями этих браузеров.

      Шаг 1 — Создание нового проекта

      На этом шаге мы используем командную строку для создания и настройки папки и файлов нового проекта. Для начала откройте терминал и создайте новую папку проекта.

      Введите следующую команду для создания папки проекта:

      В данном случае мы присвоили папке имя css-parallax. Перейдите в папку css-parallax:

      Затем создайте файл index.html в папке css-parallax с помощью команды nano:

      В этот файл мы поместим весь код HTML для данного проекта.

      На следующем шаге мы начнем создавать структуру веб-страницы.

      Шаг 2 — Настройка структуры приложения

      На этом шаге мы добавим код HTML, необходимый для создания структуры проекта.

      Добавьте в файл index.html следующий код:

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Это базовая структура большинства веб-страниц, которые используют код HTML.

      Добавьте следующий код внутри тега <body>:

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Этот код создает три разных раздела. Два из них будут содержать фоновое изображение, а один будет простым статичным фоном.

      В следующие несколько шагов вы добавите стили для каждого раздела, используя классы, добавленные в коде HTML.

      Шаг 3 — Создание файла CSS и добавление начального кода CSS

      На этом шаге мы создадим файл CSS. Затем мы добавим начальный код CSS, необходимый для построения стилей сайта и создания эффекта многоуровневого скроллинга.

      Для начала создайте файл styles.css в папке css-parallax с помощью команды nano:

      В этом файле мы разместим весь код CSS, необходимый для создания эффекта многоуровневого скроллинга.

      Затем начнем работать с классом .wrapper. Добавьте в файл styles.css следующий код:

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      Класс .wrapper устанавливает свойства перспективы и скроллинга для всей страницы целиком.

      Чтобы эффект работал, необходимо задать фиксированное значение высоты элемента wrapper. Вы можете использовать для единицы окна экрана vh значение 100, чтобы получить полную высоту окна экрана.

      При масштабировании изображений они добавляют на экран горизонтальную панель прокрутки, которую вы можете отключить, добавив выражение overflow-x: hidden;. Свойство perspective моделирует расстояние от окна экрана до псевдоэлементов, которые мы будем создавать и трансформировать в коде CSS.

      На следующем шаге мы добавим дополнительный код CSS для настройки стиля веб-страницы.

      Шаг 4 — Добавление стилей для класса .section

      На этом шаге мы добавим стили в класс .section.

      В файле styles.css необходимо добавить следующий код под классом wrapper:

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      Класс .section определяет свойства размера, отображения и текста для основных разделов.

      Установите позицию relative так, что дочерний элемент .parallax::after можно было абсолютно позиционировать по отношению к родительскому элементу .section.

      Каждый раздел имеет параметр view-height(vh) со значением 100, чтобы занимать полную высоту окна просмотра. Это значение можно изменить и установить любую высоту, предпочитаемую для каждого раздела.

      Наконец, остальные свойства CSS используются для форматирования и добавления стилей в текст внутри каждого раздела. Код размещает текст в центре каждого раздела и добавляет цвет white.

      Затем мы добавим псевдоэлемент и установим для него стиль для создания эффекта многоуровневой прокрутки в двух разделах вашего кода HTML.

      Шаг 5 — Добавление стилей для класса .parallax

      На этом шаге мы добавим стили в класс .parallax.

      Вначале мы добавим псевдоэлемент в класс .parallax, к которому применяется стиль.

      Примечание. Дополнительную информацию о псевдоэлементах CSS можно найти в веб-документах MDN.

      Добавьте следующий код под классом .section:

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      Класс .parallax добавляет псевдоэлемент ::after к фоновому изображению и предоставляет трансформы, необходимые для эффекта многоуровневой прокрутки.

      Псевдоэлемент является последним дочерним элементом элемента с классом .parallax.

      Первая половина кода отображает и позиционирует псевдоэлемент. Свойство transform перемещает псевдоэлемент дальше от камеры по индексу z, а затем масштабирует его для заполнения окна просмотра целиком.

      Поскольку псевдоэлемент располагается далеко, он выглядит так, как если бы он двигался медленнее.

      На следующем шаге мы добавим фоновые изображения и статичный фоновый стиль.

      Шаг 6 — Добавление изображений и фона для каждого раздела

      На этом шаге мы добавим заключительные свойства CSS для добавления фоновых изображений и фонового цвета статичного раздела.

      Вначале мы добавим сплошной фоновый цвет в раздел .static, вставив следующий код после класса .parallax::after:

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      Класс .static добавляет фон к статичному разделу, у которого нет изображения.

      Два раздела с классом .parallax также имеют дополнительный класс, причем у каждого раздела он свой. Используйте классы .bg1 и .bg2, чтобы добавить фоновые изображения Kitten.

      Добавим следующий код в класс .static:

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Классы .bg1, .bg2 добавляют соответствующие фоновые изображения для каждого раздела.

      Изображения взяты с сайта placekitten. Это сервис, предоставляющий изображения котят для использования в качестве замещающих элементов.

      После добавления всего кода для эффекта многоуровневой прокрутки вы можете добавить ссылку на файл styles.css в файле index.html.

      Шаг 7 — Связь styles.css и открытия index.html в вашем браузере

      На этом шаге мы привяжем файл styles.css и откроем проект в браузере, чтобы увидеть эффект многоуровневой прокрутки.

      Вначале добавим следующий код в тег <head> в файле index.html:

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Теперь вы можете открыть файл index.html в браузере:

      Многоуровневая прокрутка — gif

      Итак, мы настроили работающую веб-страницу с эффектом прокрутки. Полный код можно посмотреть в этом репозитории на GitHub.

      Заключение

      В этой статье мы описали настройку проекта с файлами index.html и styles.css и создание функциональной веб-страницы. Мы добавили структуру веб-страницы и создали стили для различных разделов сайта.

      Существует возможность отдаления используемых изображений или эффекта многоуровневой прокрутки так, что они будут двигаться медленнее. Вам нужно будет изменить значения в пикселях для свойств perspective и transform. Если вы не хотите прокручивать фоновое изображение, используйте background-attachment: fixed; вместо perspective/translate/scale.



      Source link

      Создание перетаскиваемых элементов с помощью JavaScript без расширений и HTML


      Введение

      Перетаскивание — это распространенное пользовательское действие, встречающееся во многих графических пользовательских интерфейсах.

      Существуют готовые библиотеки JavaScript для добавления функции перетаскивания в ваше приложение. Однако в некоторых ситуациях библиотека может быть недоступна, или ее использование может быть связано с издержками или зависимостями, которые не нужны вашему проекту. В таких ситуациях найти альтернативное решение поможет знание API-интерфейсов, доступных в современных браузерах.

      Так, HTML Drag and Drop API использует модель событий DOM для получения информации о перетаскиваемом элементе и обновления этого элемента после перетаскивания. С обработчиками событий JavaScript вы можете превратить любой элемент в перетаскиваемый элемент или в цель перетаскивания.

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

      Предварительные требования

      Для данного обучающего руководства вам потребуется следующее:

      • Современный браузер с поддержкой Drag and Drop API (Chrome 4+, Firefox 3.5+, Safari 3.1+, Edge 18+).

      Шаг 1 — Создание проекта и начальная разметка

      Наш проект будет состоять из контейнера с двумя типами дочерних элементов:

      • Дочерние элементы, которые можно перетаскивать
      • Дочерние элементы, в которые могут быть перетащены элементы

      Откройте окно терминала и создайте новый каталог проекта:

      • mkdir drag-and-drop-example

      Затем перейдите в этот каталог:

      Создайте в этом каталоге файл index.html:

      Добавьте базовый код веб-страницы HTML:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <title>My Drag-and-Drop Example</title>
          <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/style.css" />
        </head>
        <body>
        </body>
      </html>
      

      Добавьте между тегами <body> перетаскиваемый элемент draggable и элемент dropzone (цель перетаскивания):

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Сохраните и закройте файл. Затем создайте файл style.css:

      Добавьте стили элементов в файл index.html:

      style.css

      .example-parent {
        border: 2px solid #DFA612;
        color: black;
        display: flex;
        font-family: sans-serif;
        font-weight: bold;
      }
      
      .example-origin {
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      
      .example-draggable {
        background-color: #4AAE9B;
        font-weight: normal;
        margin-bottom: 10px;
        margin-top: 10px;
        padding: 10px;
      }
      
      .example-dropzone {
        background-color: #6DB65B;
        flex-basis: 100%;
        flex-grow: 1;
        padding: 10px;
      }
      

      При этом в приложение будет добавлено определенное форматирование. Теперь вы можете открыть файл index.html в браузере и увидеть элементы draggable <div> и dropzone <div>.

      Снимок экрана с разделами draggable и dropzone

      Затем мы явно сделаем первый <div> перетаскиваемым, добавив атрибут draggable:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
        >
          dropzone
        </div>
      </div>
      

      Сохраните и закройте файл.

      В заключение снова откройте файл index.html в браузере. Если мы нажмем на элемент draggable <div> и перетащим его через экран, потребуется визуальная индикация перемещения.

      По умолчанию атрибут draggable имеет значение auto. Это означает, что поведение браузера по умолчанию определяет, является ли элемент перетаскиваемым. Обычно это значит, что выделенный текст, изображения и ссылки можно перетаскивать, не задавая draggable="true".

      Теперь у нас есть файл HTML с перетаскиваемым элементом. Мы перейдем к добавлению обработчиков onevent.

      Шаг 2 — Обработка событий Drag-and-Drop в JavaScript

      Сейчас, если мы отпустим мышь при перетаскивании перетаскиваемого элемента, ничего не произойдет. Чтобы при перетаскивании элементов DOM активировалось действие, нам необходимо использовать Drag and Drop API:

      • ondragstart: этот обработчик событий прикрепляется к нашему элементу draggable и срабатывает при возникновении события dragstart.
      • ondragover: этот обработчик событий прикрепляется к нашему элементу dropzone и срабатывает при возникновении события dragover.
      • ondrop: этот обработчик событий прикрепляется к нашему элементу dropzone и срабатывает при возникновении события drop.

      Примечание. Всего доступно восемь обработчиков событий: ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart и ondrop. В нашем примере они требуются не все.

      Вначале разместим ссылку на новый файл script.js в нашем файле index.html:

      index.html

      <body>
        ...
        <script src="https://www.digitalocean.com/community/tutorials/script.js"></script>
      </body>
      

      Затем создадим новый файл script.js:

      Объект DataTransfer будет отслеживать информацию, связанную с текущим перетаскиванием. Чтобы обновить наш элемент после перетаскивания, нам нужен прямой доступ к объекту DataTransfer. Для этого мы можем выбрать свойство dataTransfer события DragEvent элемента DOM.

      Примечание. Объект DataTransfer технически может отслеживать информацию нескольких элементов, перетаскиваемых одновременно. В нашем примере мы ограничимся перетаскиванием одного элемента.

      Метод setData объекта dataTransfer можно использовать, чтобы задать информацию о состоянии перетаскивания текущего элемента. Для этого нужны два параметра:

      • строка, декларирующая формат второго параметра
      • фактически перемещаемые данные

      Наша цель — переместить элемент draggable в новый родительский элемент. Нам нужна возможность выбрать элемент draggable с уникальным идентификатором id. Мы можем задать id перетаскиваемого элемента с помощью метода setData, чтобы его можно было использовать позднее.

      Давайте снова откроем файл script.js и создадим новую функцию для использования setData:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      }
      

      Примечание. Сообщается, что в версиях Internet Explorer с 9 по 11 возникают проблемы при использовании 'text/plain'. Для этих версий браузера следует использовать формат 'text'.

      Чтобы обновить стили CSS перетаскиваемого элемента, мы можем снова получить доступ к его стилям, используя событие DOM, и установив желаемые стили для currentTarget.

      Дополним нашу функцию и изменим значение backgroundColor на yellow:

      script.js

      function onDragStart(event) {
        event
          .dataTransfer
          .setData('text/plain', event.target.id);
      
        event
          .currentTarget
          .style
          .backgroundColor="yellow";
      }
      

      Примечание. Любые изменяемые стили потребуется снова обновлять вручную после перетаскивания, если вы используете только стили на время перетаскивания. Если вы измените что-то в начале перетаскивания, перетащенный элемент сохранит новый стиль, если вы снова его не измените.

      Теперь у нас есть функция JavaScript для начала перетаскивания.

      Мы можем добавить ondragstart в элемент draggable в файле index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div class="example-dropzone">
          dropzone
        </div>
      </div>
      

      Откройте файл index.html в браузере. Если вы теперь попытаетесь перетащить элемент, будут применены стили, декларированные в нашей функции:

      Анимированный файл gif, показывающий элемент, который перетаскивают, но не отпускают

      Однако если отпустить элемент, ничего не произойдет.

      Следующим в этой последовательности срабатывает обработчик событий ondragover.

      Поведение определенных элементов DOM по умолчанию, в том числе <div> в браузерах, обычно не принимает отпускание. Такое поведение перехватит поведение, которое мы пытаемся реализовать. Чтобы гарантированно получить желаемое поведение при отпускании, мы применим preventDefault.

      Давайте снова откроем файл script.js и создадим новую функцию для использования preventDefault: Добавьте в конец файла следующий код:

      script.js

      function onDragOver(event) {
        event.preventDefault();
      }
      

      Теперь мы можем добавить ondragover в элемент dropzone в файле index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
        >
          dropzone
        </div>
      </div>
      

      На этом этапе мы еще не написали код для обработки завершения перетаскивания. Последним в этой последовательности срабатывает обработчик событий ondrop.

      Вернемся в файл script.js и создадим новую функцию.

      Мы можем сослаться на ранее сохраненные данные, используя метод setData объекта dataTransfer. Мы будем использовать метод getData объекта dataTransfer. Мы задали данные id, и поэтому результат выполнения будет выглядеть так:

      script.js

      function onDrop(event) {
        const id = event
          .dataTransfer
          .getData('text');
      }
      

      Выберем элемент draggable с полученным id:

      script.js

      function onDrop(event) {
        // ...
      
        const draggableElement = document.getElementById(id);
      }
      

      Выберем элемент dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        const dropzone = event.target;
      }
      

      Добавим элемент draggable в dropzone:

      script.js

      function onDrop(event) {
        // ...
      
        dropzone.appendChild(draggableElement);
      }
      

      Сбросим объект dataTransfer:

      script.js

      function onDrop(event) {
        // ...
      
        event
          .dataTransfer
          .clearData();
      }
      

      Теперь мы можем добавить ondrop в элемент dropzone в файле index.html:

      index.html

      <div class="example-parent">
        <div class="example-origin">
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            draggable
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          dropzone
        </div>
      </div>
      

      Сделав это, мы завершили реализацию функции перетаскивания. Откройте файл index.html в браузере и перетащите элемент draggable в dropzone.

      Анимированный файл gif, показывающий перетаскивание объекта в целевую зону

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

      Шаг 3 — Построение расширенного примера с несколькими перетаскиваемыми элементами

      Приведем пример возможного использования этого API: список задач с перетаскиваемыми задачами, которые вы можете перетаскивать из столбца «Сделать» в столбец «Сделано».

      Анимированный файл gif, показывающий перетаскивание нескольких задач в столбец «Сделано»

      Чтобы создать собственный список задач, добавьте дополнительные перетаскиваемые элементы с уникальными id в файл index.html:

      index.html

      <div class="example-parent">
        <h1>To-do list</h1>
        <div class="example-origin">
          To-do
          <div
            id="draggable-1"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 1
          </div>
          <div
            id="draggable-2"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 2
          </div>
          <div
            id="draggable-3"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 3
          </div>
          <div
            id="draggable-4"
            class="example-draggable"
            draggable="true"
            ondragstart="onDragStart(event);"
          >
            thing 4
          </div>
        </div>
      
        <div
          class="example-dropzone"
          ondragover="onDragOver(event);"
          ondrop="onDrop(event);"
        >
          Done
        </div>
      </div>
      

      Откройте index.html в браузере и перетащите элементы из столбца «Сделать» в столбец «Сделано». Вы создали приложение списка задач и протестировали его работу.

      Заключение

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

      Drag and Drop API предоставляет много разных возможностей настроить действия в дополнение к перетаскиванию. Например, вы можете обновлять стили CSS перетаскиваемых элементов. Также вместо перемещения вы можете копировать перетаскиваемый элемент так, чтобы при отпускании он реплицировался.

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

      Чтобы узнать больше обо всех элементах, которые вы можете перетаскивать с помощью Drag and Drop API, ознакомьтесь с соответствующей документацией MDN.



      Source link