make a draggable function in jquery

Question

I made a function that allow user to drag any element inside body. The problem I am having is when user move the mouse too fast, it lost track of the position. Is there a better way to track the mouse ? here is my functions

$(this).on("mousedown",function(event){
    //$(this).on("click",function(event){       
    $(this).css("cursor","move");
    mouseX = event.pageX;
    mouseY = event.pageY;
    xx = mouseX - $(this).position().left;
    yy = mouseY - $(this).position().top;

    console.log(" mouseX : " +mouseX+ " mouseY : " +mouseY  ) ;
    console.log(" XX : " +xx+ " YY : " +yy  ) ;

    $(this).on("mousemove",function(event){

        startX = event.pageX;
        startY =  event.pageY;
        console.log("after move page X : " +startX+ " page Y : " +startY  ) ;
        console.log("before left : " + $(this).position().left + " top : " + $(this).position().top ) ;
        dragging = true;    
        if(dragging){
            //this.style.top =  startY  - yy + 'px';
            //this.style.left = startX  - xx + 'px';
            //  $(this).animate({"left":(startX  - xx),"top":(startY  - yy)},0);
            $(this).css("top",(startY  - yy));
            $(this).css("left",(startX  - xx));

            console.log("after left : " + this.style.left + " top : " + this.style.top ) ;
        }
    });
});

it did move with the cursor but can't follow up with fast movement.

Are you aware that jQueryUI already implements draggable elements? http://jqueryui.com/draggable/ — keeehlan, Feb 28 '14 at 19:57
ya, but i want to make my own and combine with other functions — user3265085, Feb 28 '14 at 20:02
I'm wondering if this fiddle will help you: http://jsfiddle.net/stA8K/1/ - using code I wrote for this question: [here](http://stackoverflow.com/questions/21768858/follow-the-div-with-a-jquery-function-with-mousedown-mousemove-mouseup/21769208#21769208) — Blundering Philosopher, Mar 04 '14 at 16:16

make a draggable function in jquery

0 Answers0