Рубрики
Без рубрики

Перетащите с HTML5

Статья о том, как реализовать функциональность перетаскивания и падения с HTML 5.

Автор оригинала: Chuks Opia.

Эта статья впервые появилась на Backticks & Tills Отказ

Перетаскивание – это очень распространенная особенность в современных веб-приложениях. Это было с нами более десяти лет. Эта функция позволяет перемещать объекты из одного места в другое на веб-странице.

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

В этой статье мы будем реализовывать простое сопротивление и падение с помощью нативного HTML 5.

Как это работает

Реализация функции перетаскивания может показаться сложной, но обычно вращается около 4 основных моментов:

  1. Сделайте элемент Draggable.

Создание драйвера элемента так же просто, как настроить атрибут перезаряжаемого элемента в True.

  1. Что происходит, когда элемент перетаскивается?

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

  1. Где бросить элемент?

Вы можете бросить элемент на любое место, пока вы делаете этот элемент действительной «зоной падения». Вы можете сделать это через элемент Ondragover обработчик события.

  1. Что происходит, когда элемент упал?

Наконец, вы можете определить, что происходит, когда элемент упал на «зону падения» через элемент OnDrop обработчик события.

Теперь, когда мы выложили основы, давайте создадим наше приложение Demo Drag и Drop.

Настройка демонстрации демо

Для нашего простого приложения нам понадобится 3 файла:

  • файл index.html
  • Файл Main.css
  • файл main.js.

Скопируйте следующий код в файл index.html:






  
  
  Drag n Drop
  
  
  
  
  
  



  

    

      

        

          
List Heading

        

        

          

            
Card title

            
              

                
                  
                
                7/7

Скопируйте прилагаемые стили в файл Main.css:

.container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-column-gap: 1rem;
  grid-row-gap: 3rem;
  font-family: 'Titillium Web', sans-serif;
}

.droppable {
  width: 15rem;
  height: 15rem;
  max-height: 15rem;
  border: 1px dotted #7f8082;
  border-radius: 3px;
  padding: 0.5rem;
}

p {
  margin: 0;
  padding: 0;
}

.list {
  background: #e2e4e6;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  cursor: pointer;
}

.list-title {
  margin: 0;
  padding: 0.4rem 0.7rem;
}

.cards {
  padding: 0.6rem;
}

.list-card {
  background: #FFFFFF;
  border-radius: 3px;
  padding: 6px 6px 2px 8px;
  margin-bottom: 0.1rem;
}

.list-card p {
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.badge.is-complete {
  background-color: #61bd4f;
  color: #fff;
  border-radius: 3px;
  padding: 0.3rem 0.5rem;;
  font-size: 0.7rem;
  display: inline-block;
}

Посещение HTML-страницы в браузере, вы должны что-то вроде этого:

1_oeidrzo91mvoznzoafgzuw.png.

В нашей HTML Markup у нас есть div с идентификационным списком ‘. Этот Div – наша «карта DRAGGALE», поскольку мы установили, что это атрибут перезаряженного перезаряженного. Он также имеет функции, переданные на его обработчик событий OndragStart. Также, на нашей HTML-маркеуп, у нас есть 7 Divs, которые у всех есть функции, переданные в свои обработчики событий Ondragover и Ondrop. Это наши «капля зоны».

Реализация перетаскивания

API перетаскивания имеет объект dataTaTransfer, который удерживает данные, которые перетаскивают во время операции перетаскивания. Когда мы перетащим нашу карту, мы называем метод dataTaTransfer.setdata () для установки данных, которые мы хотим перетащить. В функции, называемой «DRAGELABLE» ONDRAGSTART EVECTER, мы добавляем следующий код на наш файл Main.js:

const dragStart = (event) => {
  event.dataTransfer.setData("text/plain", event.target.id);
}

В приведенном выше коде мы устанавливаем тип данных в виде «текста/простой» и значение элемента для перетаскивания в качестве идентификатора вытащенного элемента. С этим мы должны быть в состоянии перетащить нашу карту. Чтобы объявить место, где мы можем сбросить нашу карту, мы добавляем следующий код в функцию, называемую обработчиком события Ondragover наших «каплей зон»:

const allowDrop = (event) => {
  event.preventDefault();
  event.currentTarget.style.background = '#7f8082';
}

Это гарантирует, что браузер не проводит его действие по умолчанию, когда элемент перетаскивания перетаскивается над действительной «капля зоны». Мы можем выполнять другие действия здесь, например, изменение свойства фона-цветового цвета «зоны падения», чтобы пользователь знал, что они могут отбросить там элемент.

Наконец, теперь, когда у нас есть действительная зона падения, мы продолжаем и бросить наш элемент. Для этого мы получаем данные, которые мы хотим выйти из метода dataTransfer.getdata (). Метод GetData извлекает данные для данного типа или пустой строки, если данные для этого типа не существуют, либо передача данных не содержит данных.

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

const drop = (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  const element = document.querySelector(`#${data}`);
  event.currentTarget.style.background = 'white'
  try {
    event.target.appendChild(element);
  } catch (error) {
    console.warn("you can't move the item to the same place")
  }
}

В вышеупомянутом коде мы получаем элемент, который мы хотим упасть через метод dataTransfer.getdata (), мы находим элемент через его идентификатор и добавив его к «зоне падения». Мы выполняем добавление в блок Thrue/Catch, чтобы мы могли ловить любую ошибку, которая возникает, при добавлении элемента в «зону падения». Такие ошибки могут прийти от попыток бросить элемент на том же месте, от которого вытащили его.

Ваш Main.js теперь должен выглядеть так:

const dragStart = (event) => {
  event.dataTransfer.setData("text/plain", event.target.id);
}

const allowDrop = (event) => {
  event.preventDefault();
  event.currentTarget.style.background = '#7f8082';
}

const drop = (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  const element = document.querySelector(`#${data}`);
  event.currentTarget.style.background = 'white'
  try {
    event.target.appendChild(element);
  } catch (error) {
    console.warn("you can't move the item to the same place")
  }
}

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

Есть больше для перетаскивания API, чем мы покрыли здесь. Например, когда вы перетащите карту в нашем демонстрационном приложении через «зону падения», но не бросайте ее там, цвет фона капель зоны не меняется обратно к исходному цвету. Мы можем добавить обработчик событий OndragLeave, чтобы изменить цвет, когда элемент перезаряжаемых покидает наши «зоны падения».

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

Читайте ещё по теме: