[英]Drag and Drop in select element (Google Chrome)
I have a problem getting Drag and Drop for the option elements inside different select elements to work in Google Chrome.我在拖放不同选择元素中的选项元素以在 Google Chrome 中工作时遇到问题。
Here is my JSFiddle (Works fine in Firefox): http://jsfiddle.net/DyAXf/1/这是我的 JSFiddle(在 Firefox 中工作正常): http : //jsfiddle.net/DyAXf/1/
and the code:和代码:
<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>
The reason I need the select elements is because I want to know which terms are in which select element after the form is fired.我需要 select 元素的原因是因为我想知道在触发表单后哪些词在哪个 select 元素中。 It is some kind of sorting where I want to know which terms are stacked together.
这是某种排序,我想知道哪些术语堆叠在一起。 Is there a better solution to handle this?
有没有更好的解决方案来处理这个问题? Is something wrong with my code?
我的代码有问题吗?
Not sure if this is a desirable answer, but it seems like google chrome has problems using the drag and drop on select items (works fine in Firefox).不确定这是否是一个理想的答案,但似乎 google chrome 在使用选定项目上的拖放操作时遇到了问题(在 Firefox 中工作正常)。 I worked around the problem bei using the jquery sortable interaction, while sending the information serialized through ajax post.
我使用 jquery 可排序交互解决了这个问题,同时发送了通过 ajax post 序列化的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.