Перетягування в HTML - Приклад виконання перетягування в HTML

• Вступ до перетягування в HTML
• 
Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Вступ до перетягування в HTML

Перетягування - одна з останніх функцій, що входять до HTML. Перетягування - це процес, який починається, коли користувач вибирає елемент, який перетягується, і розміщує цей елемент у компоненті, що випадає, і розміщує його у вказаному місці. Він використовує модель подій Document Object Model (DOM), а також деякі події перетягування, які походять від подій миші. Він працює як найпотужніший інтерфейс, який відповідає за копіювання, запис, видалення елементів за допомогою миші. В останньому HTML функціонал перетягування працює над останніми подіями, такими як dragstart, dragend, як і їх багато інших подій.

Події для перетягування

У останній функції перетягування (dnd) включено кілька подій, давайте подивимося одна за одною наступним чином:

Давайте подивимося деякі атрибути даних, щодо яких буде відбуватися операція перетягування:

1. dataTransfer.dropEffect (= значення): Цей атрибут використовується для показу поточної операції. можна встановити його на заміну вже вибраної операції. Значення, що містяться в ньому, як копія, посилання, відсутність або переміщення.

2. dataTransfer.effectAllowed (= значення): Незалежно від операцій, які будуть повернуті через цей атрибут. Можна також встановити, щоб змінити вже вибрану операцію.

3. dataTransfer.files: Цей атрибут даних використовується для отримання fileList файлів, які будуть перетягуватися.

4. dataTransfer.addElement (елемент): використовується для вставки вже існуючого елемента до списку інших елементів, корисних для надання зворотного зв'язку перетягування.

5. dataTransfer.setDragImage (елемент, x, y): Цей атрибут трохи збігається з вищезгаданим для оновлення зворотного зв'язку перетягування та допомагає змінити вже існуючий відгук

6. dataTransfer.clearData ((формат)): це допомагає користувачеві видаляти дані з уже визначеного формату. Якщо користувач опустив аргумент, ІТ видалить усі дані.

7. dataTransfer.setData (формат, дані): Це один з популярних атрибутів, що використовуються для додавання вказаних даних.

8. data = dataTransfer.getData (формат): Цей атрибут в операції перетягування та перетягування використовується для вилучення заданих даних. Якщо немає таких же даних, як вони, вони повернуться до порожнього рядка

Синтаксис перетягування в HTML

Ось кілька кроків, що визначають синтаксис перетягування:

Виберіть об'єкт, який буде атрибутом перетягування: встановити вірний йому атрибут.

Почніть перетягувати об’єкт:

function dragStart(ev)()

Викиньте об’єкт:

function dragDrop(ev)()

Приклади перетягування в HTML

Наступний приклад покаже, як саме працюватиме операція перетягування в HTML:

Приклад №1

Код:


Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO






Drag and Drop Demo
function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

#box (
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
)
#square1, #square2, #square3 (
float: left;
margin: 5px;
padding: 10px;
)
#square1 (
width: 30px;
height: 30px;
background-color: #BEA7CC;
)
#square2 (
width: 60px;
height: 60px;
background-color: #B5D5F5;
)
#square3 (
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
)
h2 (
font-size:20px;
font-weight:bold;
text-align:center;
)

HTML DRAG AND DROP DEMO





Вихід: Перед опцією перетягування опція буде такою, як показано нижче:

Після виконання операції перетягування та виведення буде таким:

Приклад №2

Тут ми побачимо ще один приклад, в якому ми будемо переміщувати зображення з одного місця в інше вказане місце, як показано нижче коду:

Код:



function allowDrop(ev) (
ev.preventDefault();
)
function dragStart(ev) (
ev.dataTransfer.setData("text", ev.target.id);
)
function dragDrop(ev) (
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
)

.divfirst (
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
)
p (
font-size:20px;
font-weight:bold;
)



Демонстрація перетягування зображень