Geek Answers Handbook

Why does dragging and dropping on a selected list change or clear the selection?

In Chrome and Safari, if I drag from the outside a list <select>that has an attribute size(i.e. it displays as a list, not a drop-down list), the selected option changes or the selection completely disappears. Real-time example:

<p>Click anywhere outside the list below and drag over the list. Observe that the selected option becomes deselected.</p>
<select size="4">
  <option selected="">option</option>
  <option>option</option>
  <option>option</option>
</select>
Run codeHide result

Observed on Chrome 39 on Windows 7 and OS X Yosemite (EDIT: still present on Chrome 43 on Yosemite) and Safari 8 on Yosemite. Internet Explorer 11 does not display the same behavior.

If you do not pay attention and, for example, select any text at the input, it is easy enough to intercept with the mouse and accidentally change the choice without even realizing it.

? (, CSS/javascript) ? dragenter/dragover, , - , , "" .

+4
1

, ( ), . preventDefault() onmousemove .

, - .

:

var elem = document.getElementById('myselect');
elem.onmousemove = function(e){
  e.preventDefault();
};
<p>Click anywhere outside the list below and drag over the list. Observe that the selected option becomes deselected.</p>
<select id="myselect" size="4">
  <option selected="">option</option>
  <option>option</option>
  <option>option</option>
</select>
Hide result

, :)

+2

More articles:


All Articles