HTML5 基本拖放在 FF 中的输入按钮上不起作用

Question

编辑：FF的问题似乎是我试图input type="button"我的draggable元素。有没有办法做到这一点？还是我需要将所有内容从input更改为div？我真的需要使用input的value部分来制作我的游戏图块。也许用包含drag元素的div容器包装每个input实例？

我正在制作一个简单的游戏，涉及将瓷砖拖到游戏空间。一切在Chrome和IE中都运行良好，但在FF中则不然。这个问题似乎在论坛中得到了很多解决，但我尝试的每个修复程序都没有任何作用。此问题似乎发生在代码的拖动部分。当阻力发生时，我放了一个console.log()，但我什至没有得到FF.

感谢您的任何帮助。这是CodePen和下面的演示：

.CSS：

.tileBtn{
    color: #fff !important; 
    background-color: #e07171;
    cursor:pointer;
}
.gameBtns{
    margin:10px 10px;
    padding:10px; 
} 
.gameTileOpen{
    background-color: #fff;
    color: #000;
    border: 1px solid #699fc5; 
}

.HTML：

<div id="gameTiles">
    <input type="button" class="tileBtn gameBtns" draggable="true" value="Game Tile" ondragstart="dragTile(event)">
</div>  
<div id="gameBoard" ondragover="allowDrop(event)">
    <input type="button" class="gameTileOpen gameBtns" draggable="true" value="Open Space" ondragstart="dragTile(event)" ondrop="dropTile(event)">
</div>

.JS：

//allow player to drop game tiles in game area
function allowDrop(mouseEvent) {
    mouseEvent.preventDefault();
};
//drag function
function dragTile(mouseEvent) {
    console.log("this is firing");
    var tileId = mouseEvent.target.id;
    var tileValue = mouseEvent.target.value;
    var x = {tileId:tileId, tileValue:tileValue};
    var j = JSON.stringify(x);
    mouseEvent.dataTransfer.setData("text", j);
    mouseEvent.dataTransfer.effectAllowed = "move";        
};
//drop function
function dropTile(mouseEvent) {     
    mouseEvent.preventDefault();
    //get data from space that player is leaving
    var data = JSON.parse(mouseEvent.dataTransfer.getData("text")); 
    var playedId = parseInt(data["tileId"]);
    var playedValue = data["tileValue"];
    mouseEvent.target.setAttribute('value', playedValue);
    mouseEvent.target.setAttribute('class', "tileBtn gameBtns");
    mouseEvent.target.draggable = "true";
}; 

Answer 1

对于任何可能有此问题的人; 问题围绕着我试图将draggable属性赋予input元素的事实。 FF不喜欢这样，而Chrome和IE似乎对此无动于衷(它奏效了(。所以我确实必须返回并更改我的所有代码以摆脱input元素，并将它们全部更改为常规divs。这解决了draggable问题。