Example to Perform Drag and Drop

Drag to scroll

User often uses the mouse to scroll in a scrollable container. In addition to that, some applications also allow user to scroll by dragging the element. You can see that feature implemented in a PDF viewer, Figma and many more.

This post shows you a simple way to archive that feature with vanilla JavaScript.

Assume that we have a scrollable container as below:

div id="container" class="container">. div>

The element must have at least two CSS properties:

.container  
cursor: grab; 
overflow: auto;
>

The cursor: grab indicates that the element can be clicked and dragged.

Scroll to given position

As long as the element is scrollable, we can scroll it to given position by setting the scrollTop or scrollLeft property:

const ele = document.getElementById('container');
ele.scrollTop = 100;
ele.scrollLeft = 150;

Drag to scroll

The implementation is quite straightforward. By using the similar technique in the Make a draggable element post, we start with handling the mousedown event which occurs when user clicks the element:

let pos =  top: 0, left: 0, x: 0, y: 0 >;

const mouseDownHandler = function (e)  
pos =  
// The current scroll 
left: ele.scrollLeft, 
top: ele.scrollTop, 
// Get the current mouse position 
x: e.clientX, 
y: e.clientY, 
>;
 
document.addEventListener('mousemove', mouseMoveHandler); 
document.addEventListener('mouseup', mouseUpHandler);
>;

pos stores the current scroll and mouse positions. When user moves the mouse, we calculate how far it has been moved, and then scroll to the element to the same position:

const mouseMoveHandler = function (e)  
// How far the mouse has been moved 
const dx = e.clientX - pos.x; 
const dy = e.clientY - pos.y;
 
// Scroll the element 
ele.scrollTop = pos.top - dy; 
ele.scrollLeft = pos.left - dx;
>;

Good practice

As you see above, the left , top , x , and y properties are related to each other. It’s better to encapsulate them in a single variable pos instead of creating four variables.

Last but not least, we can improve the user experience by setting some CSS properties when user starts moving the mouse:

const mouseDownHandler = function(e)  
// Change the cursor and prevent user from selecting the text 
ele.style.cursor = 'grabbing'; 
ele.style.userSelect = 'none'; 
. 
>;

These CSS properties are reset when the mouse is released:

const mouseUpHandler = function ()  
document.removeEventListener('mousemove', mouseMoveHandler); 
document.removeEventListener('mouseup', mouseUpHandler);
 
ele.style.cursor = 'grab'; 
ele.style.removeProperty('user-select');
>;

Use cases

Hopefully you love the following demo!

Источник

Как создать перетаскиваемый элемент

Что нужно знать про Drag and Drop?

Дословно Drag-and-Drop переводится с английского, как «перетяни и кинь». Именно таким образом осуществляется перетаскивание элементов с использованием мыши. Чаще всего это действие ассоциируется с перемещением файлов в папку.

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

Как реализовать эффект Drag and Drop с помощью JavaScript

Первое, что нужно отметить, мы реализуем перетаскивание элементов без загрузки фреймворков и библиотеки Java Script . Для желаемого результата достаточно знаний API-интерфейса и браузеры версий: Firefox 3.5+, Chrome 4, 9+, Safari 6+, Opera 12+.

Прежде чем писать код, нужно решить 2 задачи:

1. Определяемся, что и куда будем перетаскивать (draggable element и dropzone).
2. После чего решаем, что именно будет происходить с перетаскиваемым элементом.

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

Обзор событий

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

1. Dragstart – это событие срабатывает на старте перетаскивания элемента, как только его зажимает мышь.
2. Dragenter – сработает при входе перетаскиваемого элемента в целевую область (объект).
3. Dragover – отследить событие Dragover можно в момент, когда перетаскиваемый элемент находится в зоне целевого объекта, но еще не отпущен.
4. Dragleave – означает выход перетаскиваемого элемента из целевого объекта, при этом клавиша мыши все еще зажата.
5. Drag – это событие происходит на протяжении всего времени, пока элемент в процессе перетаскивания.
6. Drop – если происходит данное событие, значит перетаскиваемый элемент «упал» при отпуске зажатой клавиши.
7. Dragend – на этом событии процесс перемещения элемента завершается (элемент либо успешно переместился, либо перетаскивание отменилось).

Этот список событий делится на две подгруппы. События № 1, 5, 7 применимы для элемента, который мы перетаскиваем. Остальные используются для целевой области. Наоборот они не функционируют и также не могут сработать одновременно. Поэтому вам нужно определиться, что будет происходить на экране при перетаскивании вашего элемента в dropzone. Наверняка, вам хочется перейти к делу. Все пояснения есть в инструкции.

Пошаговая инструкция

В качестве перетаскиваемых элементов могут быть блоки, фото, текст. Мы приведем пример с использованием списка задач, который нужно выполнить. То есть под перетаскиваемым элементом будет «TASK», а целевая область — «DONE». В html-разметке будет два , поскольку один draggable element и одна drop zone. Вы можете создавать сколько угодно элементов и зон сброса.

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

В новом каталоге проекта создаем HTML-файл и помещаем в него базовый код веб-страницы. Также в этой папке сразу создаем файл с расширением .css и .js. И чтобы не забыть, ссылку на файл style.css вставляем между тегов , а ссылку src=»https://timeweb.cloud/tutorials/css-html/script.js» перед закрытием тега .

Теперь нужно создать перетаскиваемый элемент и целевую зону. Как мы уже упоминали выше, между тегами помещаем перетаскиваемый элемент под названием TASK и область, куда его скинем. Также обратите внимание, что нужно разрешить перемещение элементов, указав около атрибута draggable значение true. Чтобы запретить перетаскивание или задать поведение автоматически (по умолчанию), используйте команды: draggable=» false | auto»

 
  
 


 
 
 
 
draggable="true" > 
TASK 
 
 
 
DONE 

 
 

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

Второй шаг: стилизуем элементы

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

.parent border: 40px solid #DEB887; 
color: #800000; 
display: flex; 
font-family: verdana; 
font-weight: bold; > 
.origin flex-basis: 100%; 
flex-grow: 3; 
padding: 5px; >
.draggable-element background-color: #FFDEAD; 
font-family: verdana; 
font-weight: bold; 
margin-bottom: 5px; 
margin-top: 5px; 
padding: 5px; >
.dropzone background-color: #FFEBCD; 
flex-basis: 100%; 
flex-grow: 2; 
padding: 5px;>

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

Третий шаг: запуск событий

Если не обработать события drag and drop, с нашим элементом при перемещении ничего не произойдет. Через HTML-атрибуты назначаем обработчика событий, чтобы запустить операцию перетаскивания: on . Не забывайте, что draggable-элементу и целевой зоне принадлежат разные события.

В нашем проекте используются основные обработчики событий:

1. Обработчик событий ondragstart срабатывает при возникновении события dragstart с перетаскиваемым элементом.
2. Как мы писали выше, событие dragover относится к dropzone. Оно срабатывает при перемещении элемента в целевой зоне.
3. Обработчик ondrop уведомляет о завершении операции перетаскивания, то есть когда перетаскиваемый элемент опустился в dropzone.

Для сохранения данных в момент перетаскивания используем объект dataTransfer. Он приравнивается к событийному объекту Event. При необходимости можно воспользоваться тремя методами dataTransfer:

• setData() — устанавливает данные для перетаскивания.
• clearData() — при вызове этой функции удаляются все данные.
• getData() — возвращает все данные, которые установлены в событии dragstart.

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

Поскольку в наш блок помещен текст, для его перетаскивания мы используем text/plain .

function onDragStart(event) event 
.dataTransfer 
.setData('text/plain', event.target.id); 
 
event 
.currentTarget 
.style 
.backgroundColor = 'red';
>
function onDragOver(event) event.preventDefault();
>
function onDrop(event) const /> .dataTransfer 
.getData('text');
const draggableElement = document.getElementById(id);
const dropzone = event.target;
dropzone.appendChild(draggableElement); 
event 
.dataTransfer 
.clearData(); >

Применим метод preventDefault(), чтобы отменить действие браузера по умолчанию. Так события будут происходить при выполнении конкретных условий. Мы использовали три обработчика событий, которые добавляем в первом и втором в файле HTML.

 
  
 


 
 
 
 
draggable="true" 
ondragstart="onDragStart(event);" > 
draggable 
 
 
 
ondragover="onDragOver(event);" 
ondrop="onDrop(event);"> 
dropzone 

 

Итоги

На нашем примере видно, как, используя HTML Drag and Drop , осуществить перемещение элементов на чистом языке JavaScript. Следуя этому алгоритму действий, можно переходить к реализации более масштабных проектов (а разместить их всегда можно на облачных серверах cloud.timeweb.com). Помните, что в разработке продуманный графический интерфейс выстраивает коммуникацию между пользователем и приложением/сайтом.

Источник

Перетаскивание элементов Drag and drop (jQuery UI Droppable)

UI Droppable – плагин, который позволяет сделать перетаскивание элементов мышью (Drag&Drop).

Подключение и базовое использование

Стили для курсоров «Drag & Drop»:

Пример:

Запретить выносить элемент за пределы родителя

Чтобы запретить вынос элемента за пределы родителя, нужно установить в опции плагина свойство containment и указать в нём id или класс родителя.

Пример:

Перемещение по сетке

За перемещение с определённым шагом отвечает параметр grid: [20, 20] .

Пример:

Ограничение направлений перемещения

Движение только по горизонтали

Пример:

Движение только по вертикали

Пример:

Перемещение только под заданным углом

Drag&Drop 20°
 
Drag&Drop -20°