Javascript 拖放选择元素（谷歌浏览器）_Javascript_Html

Javascript 拖放选择元素（谷歌浏览器）

javascript html

Javascript 拖放选择元素（谷歌浏览器）,javascript,html,Javascript,Html,我遇到了一个问题，在不同的select元素中拖拽选项元素，以便在googlechrome中工作以下是我的JSFIDLE（在Firefox中运行良好）：以及守则： <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",e

我遇到了一个问题，在不同的select元素中拖拽选项元素，以便在googlechrome中工作

以下是我的JSFIDLE（在Firefox中运行良好）：

以及守则：

    <script>
    function allowDrop(ev)
    {
        ev.preventDefault();
    }

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    </script>
    </head>

<body>
    <table style="text-align: left; width: 100%;">
        <tbody>
            <tr>
                <td></td>
                <td>
                <form>
                    <select id="taglist1" class="tagdiv" name="taglist1" size=7 ondrop="drop(event)" ondragover="allowDrop(event)">
                        <option id='giessen' class="dragElement" draggable="true" ondragstart="drag(event)" value="option1">giessen</option>
                        <option id='giessen2' class="dragElement" draggable="true" ondragstart="drag(event)" value="option2">giessen2</option>
                        <option id='giessen3' class="dragElement" draggable="true" ondragstart="drag(event)" value="option3">giessen3</option>
                        <option id='giessen4' class="dragElement" draggable="true" ondragstart="drag(event)" value="option4">giessen4</option>
                        <option id='giessen5' class="dragElement" draggable="true" ondragstart="drag(event)" value="option5">giessen5</option>
                        <option id='giessen6' class="dragElement" draggable="true" ondragstart="drag(event)" value="option6">giessen6</option>
                    </select>
                    <select id="taglist2" class="tagdiv" name="taglist2" size=7 ondrop="drop(event)" ondragover="allowDrop(event)"></select>
                </form>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                <form action="game.php" method="post">
                    <input class="uibutton" type="submit" value="Submit" />
                </form></td>
            </tr>
        </tbody>
    </table>


功能allowDrop（ev）
{
ev.preventDefault（）；
}
功能阻力（ev）
{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）
{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
吉森
吉斯2
吉森3
吉森4
吉森5
吉森6

我之所以需要select元素，是因为我想知道在触发表单后，哪些术语在哪个select元素中。

这是一种排序，我想知道哪些术语是堆叠在一起的。有没有更好的解决办法？我的代码有问题吗？

不确定这是否是一个理想的答案，但谷歌chrome在使用拖放选择项时似乎有问题（在Firefox中工作正常）。我使用jquery可排序交互解决了这个问题，同时通过ajax post发送了序列化的信息。

2年前，我曾将此作为一个bug提交给Chromium项目（）但尚未执行。