Home/ Questions/Q 8254307
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T01:08:39+00:00

I am implementing the code that I get from internet and I put a

  • 0

I am implementing the code that I get from internet and I put a select on it.
The element is messed up when I do this step on Chrome browser;

  1. I move the element and drag it.
  2. I choose select and then the element is moving to left top page.

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

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

    //stores x & 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;

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

Would you please help me to fix the code…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
     var draggable = function(element) {
    element.addEventListener('mousedown', function(e) {
        e.stopPropagation();

        // if the current target is different (in the case of a child node), don't drag.
        // you can customize this to specify types of children which prevent dragging
        if (e.target != element)
            return;

        var offsetX = e.pageX - element.offsetLeft;
        var offsetY = e.pageY - element.offsetTop;

        function move(e) {
             element.style.left = (e.pageX - offsetX) + 'px';
             element.style.top = (e.pageY - offsetY) + 'px';
        }
        function stop(e) {
            // remove the event listeners on the document when not dragging 
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', stop)
        }

        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', stop)

    })  


}

function init() {
  var ele = document.getElementById('ele');
  draggable(ele)
}

    This may not work in some IE versions, but you should be able to add the necessary fixes for that. Here’s the fiddle http://jsfiddle.net/seKbz/2/

    • 0