Home/ Questions/Q 8056697
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T08:47:41+00:00

How to make a element draggable without using jQuery UI? I have this code:

  • 0

How to make a element draggable without using jQuery UI?

I have this code:

<script type="text/javascript">
    function show_coords(event)
    {
        var x=event.clientX;
        var y=event.clientY;
        var drag=document.getElementById('drag');
        drag.style.left=x;
        drag.style.top=y
    }
</script>

<body style="height:100%;width:100%" onmousemove="show_coords(event)">
     <p id="drag" style="position:absolute">drag me</p>
</body>

The problem is that I want to drag while the user the pressing the mouse button. I tried onmousedown but results were negative.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It will be quite easy as you get the concept.

    function enableDragging(ele) {
    var dragging = dragging || false,        //Setup a bunch of variables
        x, y, Ox, Oy,
        enableDragging.z = enableDragging.z || 1,
        current;
    ele.onmousedown = function(ev) {         //When mouse is down
        current = ev.target;
        dragging = true;                     //It is dragging time
        x = ev.clientX;                      //Get mouse X and Y and store it
        y = ev.clientY;                      // for later use.
        Ox = current.offsetLeft;             //Get element's position
        Oy = current.offsetTop;
        current.style.zIndex = ++enableDragging.z;  //z-index thing

        window.onmousemove = function(ev) {
            if (dragging == true) {                //when it is dragging
                var Sx = ev.clientX - x + Ox,      //Add the difference between
                    Sy = ev.clientY - y + Oy;      // 2 mouse position to the
                current.style.top = Sy + "px";     // element.
                current.style.left = Sx + "px";
                return false;                      //Don't care about this.
            }
        };
        window.onmouseup = function(ev) {
            dragging && (dragging = false);        //Mouse up, dragging done!
        }
    };
}

enableDragging(document.getElementById("drag"));  //draggable now!

var ele = document.getElementsByTagName("div");
for(var i = 0; i < ele.length; i++){              //Every div's is draggable
    enableDragging(ele[i]);                       // (only when its "position"
}                                                 //  is set to "absolute" or
                                                  //  "relative")

    http://jsfiddle.net/DerekL/NWU9G/

    The reason why your code is not working is because the <div> will always follow where your cursor goes, and you are not actually dragging it. The top left corner will always follow your cursor, and this is not we wanted.

    UPDATE

    Now if you only want a grabber or something similar, just change this part of the script:

    ele.onmousedown = function(ev) {
    current = ev.target;

    to 

    var grabber = document.createElement("div");
grabber.setAttribute("class", "grabber");
ele.appendChild(grabber);
grabber.onmousedown = function(ev) {
    current = ev.target.parentNode;

    Now you can only click on the grabber to start the dragging process.

    http://jsfiddle.net/DerekL/NWU9G/7/

    • 0