Drag & Drop <select> element

How to drag & drop <select> element?

by simati

HTML

<div  ondragstart="dragstart_handler(event);" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
  <div class="first" >
    <span id="1" draggable="true">This element is draggable.</span>
  </div>
  <div class="second">
    <input id="2" type="text" draggable="true"  value="This element is draggable.">
  </div>
  <div class="third" >
    <select id="3" draggable="true"  onmousedown="middle_dragstart_handler(event);">
      <option>This element is not draggable.</option>
      <option>2</option>
    </select>
  </div>
</div>

CSS

.first {
  background-color: red;
  height: 40px;
}
.second {
  background-color: green;
  height: 40px;
}
.third {
  background-color: blue;
  height: 40px;
}

JavaScript

// https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API
function dragstart_handler(ev) {
 console.log("dragStart");
 ev.dropEffect = "move";
 
 // Add the target element's id to the data transfer object
 var dataEl = JSON.stringify({id: ev.target.id, el: ev.target.outerHTML})
 ev.dataTransfer.setData("text/html", dataEl);
 console.log(ev.dataTransfer);
}
function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
console.log("droped");
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = JSON.parse(ev.dataTransfer.getData("text/html"));
 var parser = new DOMParser();
 console.log(data);
 doc = parser.parseFromString(data.el, "text/html");
  console.log(doc);
 //ev.target.appendChild(doc);
 ev.target.appendChild(document.getElementById(data.id));

}

function middle_dragstart_handler(ev) {
ev.preventDefault();
console.log("try drag select");
var parent = ev.target.parentNode
var event = new Event("dragstart", {bubbles: true})
parent.dispatchEvent(event)
// dragstart_handler(ev)
}