Javascript: Dragable Element Messed up When There is <select> in Element
<p>I am implementing the code that I get from internet and I put a <strong>select</strong> on it.
The element is messed up when I do this step on Chrome browser;</p>

<ol>
<li>I move the element and drag it.</li>
<li>I choose <strong>select</strong> and then the element is moving to left top page.</li>
</ol>

<p>Please help, just simply copy and paste this code to your editor and run it;</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /&gt;
&lt;script type="text/javascript"&gt;
    //object of the element to be moved
    _item = null;

    //stores x &amp; y co-ordinates of the mouse pointer
    mouse_x = 0;
    mouse_y = 0;

    // stores top,left values (edge) of the element
    ele_x = 0;
    ele_y = 0;

    //bind the functions
    function move_init()
    {
        document.onmousemove = _move;
        document.onmouseup = _stop;
    }

    //destroy the object when we are done
    function _stop()
    {
        _item = null;
    }

    //main functions which is responsible for moving the element (div in our example)
    function _move(e)
    {
        mouse_x = document.all ? window.event.clientX : e.pageX;
        mouse_y = document.all ? window.event.clientY : e.pageY;
if(_item != null)
{ 
_item.style.left = (mouse_x - ele_x) + "px";
_item.style.top = (mouse_y - ele_y) + "px";
}
}

//will be called when use starts dragging an element
function _move_item(ele)
{
//store the object of the element which needs to be moved
_item = ele;
ele_x = mouse_x - _item.offsetLeft;
ele_y = mouse_y - _item.offsetTop;

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body onload="move_init();"&gt;
    &lt;div id="ele" onMouseDown="_move_item(this);" style="width:100px; height:100px; background-color: gray; position:fixed;"&gt;
    &lt;select onmousedown=""&gt;
        &lt;option&gt;Oh&lt;/option&gt;
        &lt;option&gt;Yes&lt;/option&gt;
        &lt;option&gt;No&lt;/option&gt;
        &lt;/select&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>Would you please help me to fix the code...</p>
