Html5 перетащить юникод шахматная доска

Question

Я пытаюсь сделать html5 dragndrop на своей шахматной доске html5 / css, используя фигуры юникода, но у меня сейчас проблема с этим.При перетаскивании и отбрасывании весь элемент 'li', кажется, движется и при падении это разрушает доску.

Это можно увидеть на шахматном сайте WordPress по адресу: http://www.buryknightschess.org.uk/play-chess/

(Как видно, я просил помочь с этим на форумах SitePoint, но ответа от него еще не было).

Возможно, мне как-то нужно просто сделать шахматные фигуры юникода перетаскиваемыми ине весь шахматный квадрат (<li></li>).

Я буду продолжать пытаться это исправить, но между тем я был бы очень признателен за любой совет, чтобы помочь с этой проблемой html5 dragndrop.Я с нетерпением жду полезных ответов, большое спасибо

Answer 1

Причина перемещения <li/> (перестановка шахматной доски) заключается в том, что в вашей drop функция вызывает appendChild:

function drop(event) {
    var element = event.dataTransfer.getData("Text");

    // This changes the DOM
    event.target.appendChild(document.getElementById(element));
    event.stopPropagation();

    return false;
}

Вместо перемещения этого фактического узла DOM,функция drop должна копировать innerHTML перетаскиваемого узла.Вот как будет выглядеть новая функция drop:

function drop(event) {
    var coordinate = event.dataTransfer.getData("Text");
    var element = document.getElementById(coordinate);

    event.target.innerHTML = element.innerHTML; // Moving piece to new cell
    element.innerHTML = ""; // Clearing old cell

    event.stopPropagation(); // Consider using `event.preventDefault` instead

    return false;
}

Кроме того, я бы рассмотрел использование event.preventDfault вместо event.stopPropagation.Это позволяет добавлять новых слушателей отбрасывания на доску или одного из ее родителей.Например, вы можете захотеть добавить слушатель отбрасывания в тело документа, чтобы обработать случай, когда пользователь пытается перетащить кусок с доски.

Как общее замечание, вы рассматривали возможность использования jQueryUI перетаскиваемые и сбрасываемые библиотеки?Вы сможете поддерживать гораздо более богатые взаимодействия перетаскивания, такие как перемещение по сетке и отложенные запуски.Кроме того, перетаскивание HTML5 обычно используется, чтобы позволить пользователям перетаскивать файлы со своего рабочего стола ОС на веб-страницу.То, как вы используете его, совершенно нормально, просто немного странно.