Як створити простий Drag and Drop компонент
Функція перетягування з HTML 5 може оптимізувати Ваш сайт за допомогою більш динамічних інтерактивних елементів, які, без сумніву, сподобаються Вашим користувачам . HTML 5 став важливим аспектом у веб-розробці, особливо у створенні високотворчих та інтерактивних компонентів, які роблять Ваш сайт більш функціональним. Зараз, функція перетягування стає популярною серед веб-розробників.
Рух слів для утворення речень
Першим кроком буде створення веб-сторінки:
<!DOCTYPE HTML>
<html>
<head>
<style type=”text/css”>
</style>
<script type=”text/javascript”>
</script>
</head>
<body>
</body>
</html>
Далі ми додамо рухливі елементи. Почніть з body, створивши 6 батьківських div елементів кожен з яких має свій дочірній div.
Батьківський div надає drop позицію для Вашого компоненту, дочірній - властивість перетягування для батьківських елементів.
Перший набір повинен бути вставлений в початок body:
<div id=”box1″>
<div>Page</div>
</div>
Потрібно продовжити дочірній елемент додавши до нього:
<div draggable=”true”>Page</div>
Додайте інші 5 div елементів:
<div id=”box2″>
<div draggable=”true”>This</div>
</div>
<div id=”box3″>
<div draggable=”true”>Web</div>
</div>
<div id=”box4″>
<div draggable=”true”>Is</div>
</div>
<div id=”box5>
<div draggable=”true”>Nice</div>
</div>
<div id=”box6″>
<div draggable=”true”>A</div>
</div>
Для того, щоб зробити ваші елементи більш інтуїтивно інтерактивними, ви повинні додати елемент стилю- drag. Додайте цей код до head, в розділ стилів:
.mover {
width:60px;
height:4em;
line-height:4em;
margin:10px;
padding:5px;
float:left;
background:#ffff99;
border:1px dotted #333333;
text-align:center;
}
Наступним кроком є додання операції перетягування. Зверніть увагу, що Ви вже додали атрибут draggable до Вашого дочірнього div елементу. Додайте цей код в якості обробника подій, який буде виконуватись, коли функція перетягування активується:
ondragstart=”dragWord(event)”
Then add this to the script section:
function dragWord(dragEvent){
//start drag
}
Потім додайте це код в середину drag функції:
dragEvent.dataTransfer.setData(“text/html”, dragEvent.target.textContent+”|”+dragEvent.target.parentNode.id);
Тепер додамо drop функцію, яка має бути приєднана до кожного з батьківських елементів:
ondragover=”event.preventDefault()”
Додайте цей код, щоб створити потрібну нам функцію. Вам потрібно додати цей код в кожний з шести батьківських елементів:
ondrop=”dropWord(event)”
Додайте цей код до скрипт-розділу Вашої сторінки:
function dropWord(dropEvent){
//drop
}
Отримання даних перетягування:
var dropData = dropEvent.dataTransfer.getData(“text/html”);
Щоб отримати дві розділені позиції даних, використовуйте знак “|”:
var dropItems = dropData.split(“|”);
Використовуйте ідентифікатор поточного батьківського div-елемента, який ви перетягуєте, щоб використовувати другий пункт з допомогою цього посилання:
var prevElem = document.getElementById(dropItems[1]);
Дочірній div повинен мати вміст всередині батьківського div, який буде відображати слова на перетягуваних елементах за допомогою цього коду:
prevElem.getElementsByTagName(“div”)[0].textContent = dropEvent.target.textContent;
Тоді ви оновляєте dropped елемент, щоб показати слово, яке перетягнули і яке має бути розташоване в першому масиві даних, який використовується в якості індексу 0, використовуючи цей код:
dropEvent.target.textContent = dropItems[0];
Додайте це код, щоб запобігти відображенню поведінки за замовчуванням:
dropEvent.preventDefault();
Кінцевий результат буде виглядати так:
See the Pen sCtpb by Sergij (@SergioAnd95) on CodePen.
673 7
Коментарі: