jQuery Move-able Div

Today, I was helping a friend who is learning web development.  He was trying to create a way to move a div element using click and drag.  Here is how we implemented it…

<head>
<title>jQuery Move-able Div</title>
<link href='./includes/styles.css' rel='stylesheet' type='text/css' />
<script src='./includes/jQuery1.6.4.js' type='text/javascript'></script>
<script type='text/javascript'>
var x1,y1,x2,y2,distX,distY;
      $(document).ready(function(){
$('#moveableDiv').mouseover(function(){
$(this).css("cursor","pointer");
});
$('#moveableDiv').bind('mousedown', function(event){
x1 = event.clientX;
y1 = event.clientY;
var x3 = parseInt($('#moveableDiv').css('left'));
var y3 = parseInt($('#moveableDiv').css('top'));
$(this).bind('mousemove', function(event1) {
x2 = event1.clientX;
y2 = event1.clientY;
distX = x2 - x1;
distY = y2 - y1;
var newX = x3 + distX;
var newY = y3 + distY;
$(this).css('left', newX);
$(this).css('top', newY);
});
});
$(document).mouseup(function() {
$(this).unbind('mousemove');
});
});
</script>
</head>
 <body>
<div id='moveableDiv'>Hello</div>
</body>
</html>

Let’s break this down and see what is happening!

Create the style sheet to better distinguish the move-able div element contained in the file, “includes/styles.css”:

div#moveableDiv{
   width: 200px;
   height: 100px;
   position: absolute;
   left: 50px;
   top: 50px;
   z-index: 1;
   border: 1px black solid;    
background-color: #ff9999;
}

then, comes the javascript!

Declare variables used to keep track of the div location:

  var x1,y1,x2,y2,distX,distY;

Then when the DOM is ready…

  $(document).ready(function(){

attach a mouseover event that changes the cursor into a hand pointer…

    $('#moveableDiv').mouseover(function(){
$(this).css("cursor","pointer");
});

Bind the mousedown event, assigning the mouse coordinates in x1 and y1…

    $('#moveableDiv').bind('mousedown', function(event){
x1 = event.clientX;
y1 = event.clientY;

then assign the original div location in x3 and y3…

      var x3 = parseInt($('#moveableDiv').css('left'));
var y3 = parseInt($('#moveableDiv').css('top'));

Bind the mousemove event to actually do the move.

      $(this).bind('mousemove', function(event1) {
x2 = event1.clientX;
y2 = event1.clientY;

This is accomplished by tracking the location of the mouse as it moves in x2 and y2 and calculating the difference between the original location and the current…

        distX = x2 - x1;
distY = y2 - y1;
var newX = x3 + distX;
var newY = y3 + distY;

then assigning it to the css left and top properties for the div element…

        $(this).css('left', newX);
$(this).css('top', newY);
});
});

Finally, unbind the mousemove event on mouseup to release the mouse…

    $(document).mouseup(function() {
$(this).unbind('mousemove');
});
});
</script>

Let me know your thoughts on this tutorial below in the comments, I look forward to hearing from you! You can check out my website at http://www.manzwebdesigns.net/ if you so desire.

Thanks!
Bud Manz

Bud Manz is a strong advocate of the Open Source movement, believing that the way to making one's self the best they can be is most effectively accomplished by helping other people succeed. He enjoys arranging (and singing!) hymns, gardening, and most things geeky :)

4 Comments

  1. Lightm1 5 years ago

    Hi Bud,

    This is a cool “JQuery” trick! It’s a bit hard too. JQuery is very hard to learn.
    Thanks for the example.

    • admin 5 years ago

      Hi!

      Thanks for the compliment! A wise man once said, “the first step in winning is starting”. You have started, now the next thing is pressing on!

      Bud

      • Lightm1 5 years ago

        Hi Bud,

        JQuery is very new language. Even though it’s java-script. It like everything is evolving around this it now. It’s very hard to create something like what your did base on

        https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

        in order the function to work.

        It’s not enough experts trying to create these stuff. It’s very to come up what you did. Plus you also explain in details, step by step. Which I felt you are a very good tutor!

        Thanks for script, it’s fun plus complex

        • admin 5 years ago

          Hi

          Actually, jQuery is a Javascript framework that has been around probably close to 5 years or more. I appreciate your kind comments!

          Bud

Leave a reply