Html5拖放unicode棋盘

Posted 2023-03-04

【中文标题】Html5拖放unicode棋盘

【英文标题】：Html5 drag and drop unicode chessboard

【发布时间】：2011-12-08 21:08:51

【问题描述】：

我正在尝试使用 unicode 块在我的 html5/css 棋盘上执行 html5 dragndrop，但目前遇到了问题。 在拖放时，整个 'li' 元素似乎在移动，而在放下时，这会破坏棋盘。

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

（可以看出，我在 SitePoint 论坛上寻求帮助，但尚未从那里得到帮助）。

可能我只需要使 unicode 棋子可拖动，而不是整个棋盘 (<li></li>)。

我将继续尝试解决此问题，但同时我将非常感谢任何有助于解决此 html5 拖放问题的建议。我期待有帮助的回复，非常感谢

【参考方案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 添加到 board 或其父级之一。例如，您可能希望在文档正文中添加一个放置侦听器，以处理用户试图将一块棋子拖出棋盘的情况。

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

【讨论】：

Xavi-非常感谢您出色而详细的回答。我将使用您的建议并研究它们，以便了解有关 html5 dragndrop 的更多信息。也许 jQuery dnd 总体上更好，但由于棋盘是 html5，我想尝试使用 html5 dnd 保持所有“原生”。我可能会使用 jQuery 做另一个版本-再次感谢您的出色回复！