Перетаскивание – это очень полезный инструмент в приложениях, так как он может упростить большую часть процесса для пользователей. Это также общая задача, которую мы делегируем для других библиотек, которые могут раздувать ваше приложение, когда вам просто нужно Очень простая реализация Когда вы можете использовать Перетащите веб-API . Сегодня я покажу вам, как вы можете сделать только это!
Что мы делаем
Это основная реализация, которую мы стремимся построить:
Это было сделано всего за 16 строк JavaScript!
И с еще несколькими линиями мы можем добавить намного больше бонусных функций! Вот демонстрация некоторых функций!
Играть с этим, вы увидите, что мы можем
- Падение элементов только в определенных местах
- Стиль элемент, в котором мы бросаем
- Стиль оригинальная копия перетаскиваемого элемента
- (С маленькой хитростью) даже стиль вытащенного элемента!
Все это с только 30 строк кода!
Он работает практически на всех настольных браузерах с частичной поддержкой, вернувшись до IE 6 (!) Что должно быть достаточно для этого, но он не работает на некоторых мобильных браузерах.
Вы можете увидеть современные данные каров здесь:
Работа с библиотеками для этой очень базовой функциональности для меня была боль, и спасти вам неприятности, я думал, что я здесь документирую этот процесс!
Структура HTML
Места, чтобы перетащить в
Вам нужны такие цели падения, чтобы иметь возможность что-то утащить в них? Мы можем добавить их с помощью обычных Divs:
Примечание: Я буду ссылаться на места, которые мы можем прийти в зависимость от целей падения в этом посте
Вы можете добавить столько, сколько вам нравится, пока элемент имеет уронить Класс мы Будет ли быть в состоянии упасть в них.
Мы также можем добавить некоторые основные стили для них, чтобы выглядеть красиво.
* {
box-sizing: border-box;
font-family: sans-serif;
}
.drop {
width: 220px;
height: 45px;
background: #2563EB;
margin-bottom: 10px;
padding: 10px;
border-radius: 3px;
}
Элемент, чтобы перетащить
Для элемента, чтобы быть перегруженным, нам нужно, ну, элемент! Мы можем разместить элемент в одну из целей падения, которые мы сделали ранее. Вот как это должно выглядеть
Drag me!
Обратите внимание, как мы также устанавливаем Перетащить атрибут true. Каждый элемент перетаскивания должен иметь Перетащить Атрибут набор для него для перезаряда.
Кроме того, не каждый элемент может быть перетащин, даже если Перетащить атрибут установлен. Нам нужно явно сказать, что элемент пересекается путем прослушивания DragStart событие в HTML. Там мы устанавливаем нулевой Поскольку у нас нет данных, чтобы поделиться, и мы устанавливаем тип данных текст/простые .
Мы можем (снова) также добавить некоторые основные стили для них, чтобы выглядеть красиво.
#drag {
width: 200px;
height: 25px;
border-radius: 3px;
background: black;
color: white;
display: grid;
align-items: center;
justify-content: center;
}
Обратите внимание, что до тех пор, пока элемент имеет Перетащить Атрибут установлен на правда и целевые показатели падения имеют падение Класс, код ниже должен работать везде
Минимальная реализация
Для нашего сопротивления, чтобы быть функциональным, нам просто нужно 3 разных слушателя событий. Все остальное – это бонус.
Во-первых, нам нужно хранить элемент, который мы перетаскиваем. Мы можем сделать это, слушая DragStart мероприятие.
let dragged;
document.addEventListener('dragstart', event => {
dragged = event.target;
}, false)
Всякий раз, когда вытащите элемент, это будет хранить перетаскиваемый элемент в переменной.
Далее мы можем слушать события Drop, чтобы мы могли бросить элементы.
document.addEventListener('drop', event => {
// Prevent default behaviour (sometimes opening a link)
event.preventDefault();
if (event.target.className === 'drop') {
dragged.parentNode.removeChild(dragged);
event.target.appendChild(dragged);
}
}, false)
Всякий раз, когда мы бросаем элемент, если элемент является целью падения (имеет класс Drop Class), мы будем добавлять перетаскиваемый элемент в цель падения.
Мы почти закончили, но нам нужно сделать еще одну вещь, чтобы сделать эту работу.
По умолчанию элементы перетаскивания ничего не делают, поэтому для предотвращения поведения по умолчанию нам нужно позвонить Event.PreventDefault. всякий раз, когда мы перетаскиваем целевую цену.
Это легко достичь с помощью Oneliner:
document.addEventListener('dragover', event => event.preventDefault(), false);
Вот и все! В 16 строках у нас есть функциональное сопротивление!
Вот видео об этом в действии:
Добавление большего размера
Даже если это перетаскивание работает , это не очень мило. Это не кажется очень «естественным». К счастью, в нескольких линиях кода мы можем сделать это сопротивление еще лучше!
Укладка оригинального вытащенного элемента
Всякий раз, когда мы перетащим элемент, оригинальная копия элемента не изменится его стиль. Он будет выглядеть лучше, если бы мы могли добавить другой стиль к этим перетаскивающим элементам, как сделать их прозрачными, чтобы показать, что оно тащится.
Это очень легко сделать. Просто добавьте стили в DragStart Слушатель событий.
document.addEventListener('dragstart', event => {
// ...
event.target.style.opacity = 0.5;
// add more styles as you like...
// ...
});
Но нам также нужно сбросить стиль, как только мы закончим перетаскивание. Мы можем сделать это, слушая перетягивать :
document.addeventListener('dragend', event => event.target.style.opacity = '', false)
Стиль целей падения
Мы также можем стимулировать цель падения, слушая Драчатник мероприятие:
document.addEventListener('dragenter', event => {
if (event.target.className === 'drop') event.target.style.background = '#2c41cc';
}, false)
Еще раз, нам нужно сбросить стили, как только мы покинем элемент. Мы можем сделать это, слушая драгоценно :
document.addEventListener('dragleave', event => {
if (event.target.className === 'drop') event.target.style.background = '';
}, false)
Нам также необходимо сбросить стили, как только мы бросьте событие. Мы можем редактировать падение мероприятие для достижения этого.
document.addEventListener('drop', event => {
// ...
if (event.target.className === 'drop') {
event.target.style.background = '';
//...
})
Стиль вытащенной копии
С небольшим количеством хитрости мы можем стиль итаченную копию тоже! Может быть, мы можем немного повернуть элемент, чтобы сделать его немного более естественным.
Мы можем сделать это, укладывая оригинальную копию и немедленно уничтожив эти стили в DragStart событие, так что пользователи не видят этого.
listen('dragstart', event => {
// ...
event.target.style.transform = 'rotate(-2deg)';
setTimeout(() => event.target.style.transform = '', 1);
})
Теперь притащенная копия будет повернута, когда мы тащите его!
Теперь у вас есть полностью функционирующая реализация перетаскивания!
Вот видео об этом в действии:
Вот цик со всем исходным кодом для справки
Заключение
Мы сделали задачу, для которой мы очень часто делегируем библиотеки и реализовали его, с удивительно небольшим количеством кода.
Я надеюсь, что это открывает ваши глаза, насколько вы можете сделать только с Vanilla JS. Вам не нужны библиотеки каждый раз.
Вы когда-нибудь пробовали реализацию перетаскивания самостоятельно? Доля в комментариях!
Оригинал: “https://dev.to/siddharthshyniben/a-powerful-drag-and-drop-implementation-in-just-16-lines-of-javascript-d5d”