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

Hide tabs in wordpress backend if user is not admin

This simple and easy script will hide the media tab in the backend of wordpress if the current user that is logged-in is not admin.
we use css to hide the tabs.

if ( !is_super_admin() ) {
 add_action('admin_head', 'hideElement');
 function hideElement() {
   echo '<style>
   #menu-media{
    display:none !important;
   }    
    </style>';
 }
}

note that this method is not the best way to hide the tabs in our wordpress backend. It is not bulletproof and secure.

Run a css depending on the current logged in username

This script will add custom css on our wordpress backend if the current logged in user name is "guest".

$current_user = wp_get_current_user();
if ( $current_user->user_login == "guest" ) {
 add_action('admin_head', 'hideMenus');
 function hideMenus() {
   echo '<style>
   #menu-media,#menu-comments,#menu-users,#menu-posts{
    display:none !important;
   }    
    </style>';
 } 
}

Get the width and height of a div using jquery

This code shows how to get the width and height of a container, We must know the css selector of the div in order to do this.

//get the class or id of the container
 $('.container').width();
 $('.container').height();

Add button next to add media in create post wordpress

PREVIEW:

// add button next to add media button
function add_my_media_button() {
    echo 'Custom button next to Add media';
}
add_action('media_buttons', 'add_my_media_button');