Html5拖放unicode棋盤

我想在我的html5/css棋盤上使用unicode塊做html5 dragndrop，但現在有一個問題。拖動&掉落整個'li'元素似乎在移動&這會破壞棋盤。Html5拖放unicode棋盤

這在國際象棋WordPress站點在中可以看出： http://www.buryknightschess.org.uk/play-chess/

（可以看到我問這方面的幫助上SitePoint論壇，但還沒有從那裏有一個答覆，以幫助尚未）。

也許我只是想讓unicode棋子可以拖動而不是整個國際象棋棋子（<li></li>）。

我會繼續努力解決這個問題，但同時我會非常感謝任何建議，以幫助解決這個html5 dragndrop問題。我期待着幫助的回覆，非常感謝

2011-10-16 rpd

的<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 draggable和droppable庫？您將能夠支持更加豐富的拖放/拖放交互，例如對齊網格移動和延遲啓動。此外，HTML5拖放功能通常用於允許用戶將文件從OS桌面拖放到網頁上。你用它的方式完全沒問題，這有點奇怪。

來源

2011-10-16 23:01:23 Xavi

哈維 - 非常感謝您的出色和詳細的答案。我會使用你的建議並研究它們，以便我可以瞭解更多關於html5 dragndrop的信息。也許jQuery dnd總體來說更好，但是由於棋盤格是html5，我想盡量使用html5 dnd來保持它的所有'原生'。我可以使用jQuery來做另一個版本 - 再次感謝您的回覆！ – rpd

Html5拖放unicode棋盤

回答

相關問題