Функція перетягування з HTML 5 може оптимізувати Ваш сайт за допомогою більш динамічних інтерактивних елементів, які, без сумніву, сподобаються Вашим користувачам . HTML 5 став важливим аспектом у веб-розробці, особливо у створенні високотворчих та інтерактивних компонентів, які роблять Ваш сайт більш функціональним. Зараз, функція перетягування стає популярною серед веб- розробників.

Рух слів для утворення речень

Першим кроком буде створення веб-сторінки:

    <style type=""text/css"">
    </style>
    <script type=""text/javascript"">
    </script>

Далі ми додамо рухливі елементи. Почніть з body, створивши 6 батьківських div елементів кожен з яких має свій дочірній div.
Батьківський div надає drop позицію для Вашого компоненту, дочірній - властивість перетягування для батьківських елементів.
Перший набір повинен бути вставлений в початок body:

    <div>
    <div>Page</div>
    </div>

Потрібно продовжити дочірній елемент додавши до нього:

    <div>Page</div>

Додайте інші 5 div елементів:

    <div>
    <div>This</div>
    </div>
    <div>
    <div>Web</div>
    </div>
    <div>
    <div>Is</div>
    </div>
    <div>
    <div>Nice</div>
    </div>
    <div>
    <div>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();

Кінцевий результат буде виглядати так: