Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

draggable without jQuery ui

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.

like image 287
NewUser Avatar asked Jun 09 '12 23:06

NewUser


People also ask

Why is draggable not working?

You have one of these problems: Your jQuery or jQuery UI Javascript path files are wrong. Your jQuery UI does not include draggable. Your jQuery or jQuery UI Javascript files are corrupted.

How do you make a draggable box in HTML?

To make an object draggable set draggable=true on that element. Just about anything can be drag-enabled: images, files, links, files, or any markup on your page.

What is UI draggable?

jQuery UI draggable() method is used to make any DOM element draggable. Once the element is made draggable, you can move it by clicking on it with the mouse and drag it anywhere within the viewport.

Can Div be draggable?

Draggable Div is a kind of element that you can drag anywhere.


1 Answers

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/

like image 196
Derek 朕會功夫 Avatar answered Sep 21 '22 06:09

Derek 朕會功夫