title: Drag and Drop in select element (Google Chrome)
body: <p>I have a problem getting Drag and Drop for the option elements inside different select elements to work in Google Chrome.</p>
  <p>Here is my JSFiddle (Works fine in Firefox):
  <a href="http://jsfiddle.net/DyAXf/1/" rel="nofollow noreferrer">http://jsfiddle.net/DyAXf/1/</a></p>
  <p>and the code:</p>
  <pre><code>    &lt;script&gt;
      function allowDrop(ev)
      {
          ev.preventDefault();
      }
  
      function drag(ev)
      {
          ev.dataTransfer.setData(&quot;Text&quot;,ev.target.id);
      }
  
      function drop(ev)
      {
          ev.preventDefault();
          var data=ev.dataTransfer.getData(&quot;Text&quot;);
          ev.target.appendChild(document.getElementById(data));
      }
      &lt;/script&gt;
      &lt;/head&gt;
  
  &lt;body&gt;
      &lt;table style=&quot;text-align: left; width: 100%;&quot;&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;
                  &lt;form&gt;
                      &lt;select id=&quot;taglist1&quot; class=&quot;tagdiv&quot; name=&quot;taglist1&quot; size=7 ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;
                          &lt;option id='giessen' class=&quot;dragElement&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; value=&quot;option1&quot;&gt;giessen&lt;/option&gt;
                          &lt;option id='giessen2' class=&quot;dragElement&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; value=&quot;option2&quot;&gt;giessen2&lt;/option&gt;
                          &lt;option id='giessen3' class=&quot;dragElement&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; value=&quot;option3&quot;&gt;giessen3&lt;/option&gt;
                          &lt;option id='giessen4' class=&quot;dragElement&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; value=&quot;option4&quot;&gt;giessen4&lt;/option&gt;
                          &lt;option id='giessen5' class=&quot;dragElement&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; value=&quot;option5&quot;&gt;giessen5&lt;/option&gt;
                          &lt;option id='giessen6' class=&quot;dragElement&quot; draggable=&quot;true&quot; ondragstart=&quot;drag(event)&quot; value=&quot;option6&quot;&gt;giessen6&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;select id=&quot;taglist2&quot; class=&quot;tagdiv&quot; name=&quot;taglist2&quot; size=7 ondrop=&quot;drop(event)&quot; ondragover=&quot;allowDrop(event)&quot;&gt;&lt;/select&gt;
                  &lt;/form&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;/td&gt;
                  &lt;td&gt;
                  &lt;form action=&quot;game.php&quot; method=&quot;post&quot;&gt;
                      &lt;input class=&quot;uibutton&quot; type=&quot;submit&quot; value=&quot;Submit&quot; /&gt;
                  &lt;/form&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  <p>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.
  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?</p>