Drag & Drop <select> element v2

How to drag & drop <select> element?

by simati

HTML

<div  id="list">
  <div class="first item" draggable="true">
    <span>This element is draggable.</span>
  </div>
  <div class="second item" draggable="true">
    <input type="text"  value="This element is draggable.">
  </div>
  <div class="third item" draggable="true" >
    <select onmousedown="start(event)">
      <option>This element is not draggable.</option>
    </select>
  </div>
</div>

CSS

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

JavaScript

var dragSrcEl = null;
var start = function (e) {
  e.preventDefault()
  var parent = e.target.parentNode
  // var dataTransfer = new DataTransfer()
  // dataTransfer.effectAllowed = 'move'
  //dataTransfer.setData('text/html', parent.outerHTML);
  //var event = new CustomEvent('dragstart', {bubbles: true } );
  //event.dataTransfer = {writable: truer}
  // parent.dispatchEvent(event)
  var ev = document.createEvent('MouseEvents')
  ev.initMouseEvent('dragstart', true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  var fake = {
  	effectAllowed: 'move',
    setData: function (val) { return val }
  }
  ev.dataTransfer = fake
  //ev.dataTransfer = new DataTransfer()
  //ev.dataTransfer.dropEffect = 'move'
  console.log(ev)
  parent.dispatchEvent(ev)
}
function handleDragStart(e) {
  // Target (this) element is the source node.
  dragSrcEl = this;
	console.log('start')
  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.outerHTML);
  console.log(e)
  this.classList.add('dragElem');
}
function handleDragOver(e) {
  if (e.preventDefault) {
    e.preventDefault(); // Necessary. Allows us to drop.
  }
  this.classList.add('over');

  e.dataTransfer.dropEffect = 'move';  // See the section on the DataTransfer object.

  return false;
}

function handleDragEnter(e) {
  // this / e.target is the current hover target.
}

function handleDragLeave(e) {
  this.classList.remove('over');  // this / e.target is previous target element.
}

function handleDrop(e) {
  // this/e.target is current target element.

  if (e.stopPropagation) {
    e.stopPropagation(); // Stops some browsers from redirecting.
  }

  // Don't do anything if dropping the same column we're dragging.
  if (dragSrcEl != this) {
    // Set the source column's HTML to the HTML of the column we dropped on.
    //alert(this.outerHTML);
    //dragSrcEl.innerHTML = this.innerHTML;
    //this.innerHTML = e.dataTransfer.getData('text/html');
   ...