2013-05-08 192 views
3

我有一個問題,即在不同的select元素內部的選項元素拖放到谷歌瀏覽器中工作。在選擇元素(Google Chrome)中拖放

這是我的jsfiddle(在Firefox正常工作): http://jsfiddle.net/DyAXf/1/

,代碼:

<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> 

的原因,我需要選擇的元素是因爲我想知道至極條款是至極在表單被觸發後選擇元素。 它的某種排序,我想知道哪些術語堆疊在一起。有沒有更好的解決方案來處理這個問題?我的代碼有問題嗎?

在此先感謝。

回答

2

不知道這是否是一個理想的答案,但它似乎像谷歌瀏覽器使用拖放選擇項目(在Firefox中正常工作)的問題。我使用jQuery可排序交互解決了bei問題,同時通過ajax post發送了序列化信息。