我正在尝试使用 unicode 块在我的 html5/css 棋盘上执行 html5 dragndrop，但目前遇到了问题。 在拖放时，整个 'li' 元素似乎在移动，而在放下时，这会破坏棋盘。
这可以在国际象棋 WordPress 网站上看到： http://www.buryknightschess.org.uk/play-chess/
（可以看出，我在 SitePoint 论坛上寻求帮助，但尚未从那里得到帮助）。
可能我只需要使 unicode 棋子可拖动，而不是整个棋盘 (<li></li>)。
我将继续尝试解决此问题，但同时我将非常感谢任何有助于解决此 html5 拖放问题的建议。我期待有帮助的回复，非常感谢
【问题讨论】：
标签： html drag-and-drop
<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 添加到 board 或其父级之一。例如，您可能希望在文档正文中添加一个放置侦听器，以处理用户试图将一块棋子拖出棋盘的情况。
作为一般评论，您是否考虑使用 jQueryUI draggable 和 droppable 库？您将能够支持更丰富的拖放交互，例如对齐网格移动和延迟启动。此外，HTML5 拖放通常用于允许用户将文件从其操作系统桌面拖放到网页上。使用方式完全没问题，就是有点奇怪。
【讨论】：