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

function start (ev) {


ball.onmousedown = function(e) {

  var coords = getCoords(ball);
  var shiftX = e.pageX - coords.left;
  var shiftY = e.pageY - coords.top;

  ball.style.position = 'absolute';
  document.body.appendChild(ball);
  moveAt(e);

  ball.style.zIndex = 1000; // над другими элементами

  function moveAt(e) {
    ball.style.left = e.pageX - shiftX + 'px';
    ball.style.top = e.pageY - shiftY + 'px';
  }

  document.onmousemove = function(e) {
    moveAt(e);
  };

  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  };

}

ball.ondragstart = function() {
  return false;
};

function getCoords(elem) {   // кроме IE8-
  var box = elem.getBoundingClientRect();
  return {
    top: box.top + pageYOffset,
    left: box.left + pageXOffset
  };
}

}
}