Question

我正在尝试使用unicode片段在我的html5 / css棋盘上执行html5 dragndrop，但此刻它有问题。在拖拽和放弃整个'li'元素似乎移动＆amp;这会打乱董事会。

这可以在国际象棋WordPress网站上看到： http://www.buryknightschess.org.uk/play-chess/

（可以看出我在SitePoint论坛上寻求帮助，但还没有回复帮助）。

可能我只需要让unicode的棋子可以拖拽和放大不是整个国际象棋广场（<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;
}

drop函数应该复制被拖动节点的innerHTML，而不是移动实际的DOM节点。以下是新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。这使得可以向板或其父节点之一添加新的drop listener。例如，您可能希望向文档正文添加一个drop listener，以处理用户试图将一块文件从板上拖出的情况。

作为一般评论，您是否考虑过使用jQueryUI draggable和droppable库？您将能够支持更丰富的拖放交互，例如对齐网格移动和延迟启动。此外，HTML5拖放通常用于允许用户将文件从其OS桌面拖动到网页上。你使用它的方式完全没问题，这有点奇怪。

Html5拖放unicode棋盘

1 个答案: