Add div element on click and make it draggable using jquery

In this tutorial, i will show you how to add an box,div or element in an certain area then after it has been inserted, we will make it draggable.

We will use jquery ui and we will use the jquery offset function to accomplish this task, first we will get the coordinates of the clicked area then add an box on that spot.

Preview of the whole function

    
$('#layoutSpace').click(function(e){    
    var offset = $(this).offset();  
    areaBox = 50;//to center the mouse point
    mouseX = (e.pageX - offset.left - areaBox );
    mouseY =  (e.pageY - offset.top - areaBox );   
    $('#layoutSpace').append('<div class="dbox" style="left:'+ mouseX +'px;top:'+ mouseY  +'px;"></div>');
    //run the draggable function
 runTheDrag(); 
});    

MainlayoutX = $('#layoutSpace').offset().left; //Get main layout of the mainContainer
MainlayoutY = $('#layoutSpace').offset().top; //Get main layout of the mainContainer

//function for draggable box
function runTheDrag(){
    $(".dbox").draggable({ 
        containment: '#layoutSpace',
        scroll: false,   
        drag: function(){
            var offset = $(this).offset(); 
            var left = offset.left - MainlayoutX;
            var top = offset.top - MainlayoutY;   
            
            $(".dbox .xAxis").val(left);
            $(".dbox .yAxis").val(top);      
        }
    });    
}

This code will will register the area that is clicked by the mouse and add an box on that spot

    var offset = $(this).offset();  
    areaBox = 50;//to center the mouse point
    mouseX = (e.pageX - offset.left - areaBox );
    mouseY =  (e.pageY - offset.top - areaBox );   
    $('#layoutSpace').append('<div class="dbox" style="left:'+ mouseX +'px;top:'+ mouseY  +'px;"></div>');
    //run the draggable function
    runTheDrag(); 
});  

runTheDrag() function is to make the box draggable on click using jquery ui

 runTheDrag();

 function runTheDrag(){
    $(".dbox").draggable({ 
        containment: '#layoutSpace',
        scroll: false,   
        drag: function(){
            var offset = $(this).offset(); 
            var left = offset.left - MainlayoutX;
            var top = offset.top - MainlayoutY;   
            
            $(".dbox .xAxis").val(left);
            $(".dbox .yAxis").val(top);      
        }
    });    
} 

As you notice, we inserted the runTheDrag() function on to the click function
The reason is we need to rerun the jquery code on click to register the draggable function again on the newly added box.

Live Demo

Add div element on click in a certain coordinate using jquery

Add div element on click in a certain coordinate using jquery
Using jquery offset, we will get the coordinates of the clicked area then add an box on that spot.

$('#layoutSpace').click(function(e){    
    var offset = $(this).offset();  
    areaBox = 50;//to center the mouse point
    mouseX = (e.pageX - offset.left - areaBox );
    mouseY =  (e.pageY - offset.top - areaBox );   
    $('#layoutSpace').append('
');
}); 

to center the box coordinate we will divide our box into 2
in my case, my box width and height is 100px so i will divide it to 2 and that would be 50.

areaBox = 50;//to center the mouse point

after that we will minus it to our x and y axis to center it up

  mouseX = (e.pageX - offset.left - areaBox );
  mouseY =  (e.pageY - offset.top - areaBox );

Live Demo

Get axis on click jquery

get x and y axis on click using jquery

We will use jquery offset to determine the coordinates of the click in our specified div

$('#layoutSpace').click(function(e){    
    var offset = $(this).offset();  
    mouseX = (e.pageX - offset.left );
    mouseY =  (e.pageY - offset.top );   
    $('.axisXY').html("X: " + mouseX + " Y: " + mouseY);
});

LIVE DEMO click anywhere on the box