Home/ Questions/Q 6628425
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T22:07:46+00:00

I’m learning how to drag-and-drop-move DIV’s around the document in javascript. Here is a

  • 0

I’m learning how to drag-and-drop-move DIV’s around the document in javascript. Here is a live demo:

http://jsfiddle.net/BBANc/

This works fine in Firefox and I’m not currently developing with any other browser. However, if you change set_coords_in_js to false, the demo fails.

Using Firebug to set some breakpoints, you’ll notice that this line fails:

var div_left = parseInt( mov_div_1.style.left, 10 );

There is no value for mov_div_1.style.left at this point. So javascript has no idea what the existing value is, and sets div_left to ‘NaN’. This style is set, and appears to be valid in the document, but there is no value in the DOM!

If you set set_coords_in_js back to true, then the above has a value and everything works perfectly as it should.

Why?

If you want to play with this locally, copy-and-paste this into your local demo file. To see the values (or lack thereof) in Firebug, set your breakpoint on line 39 or 40 and step through, hovering your mouse over the things in the line. Make sure you set set_coords_in_js to false to see the problem.

drag_move_div.html:

<!DOCTYPE html>
<html>
<head>
<title>drag move div demo</title>

<style type='text/css'>
.movDiv {
  position: absolute;
  left: 80px;
  top:  80px;
  cursor: move;
  border: 1px dashed green;
  padding: 1em;
}
.coordinates_display { font-weight: bold; }
</style>

<script type='text/javascript'>
window.onload = function() {
  mov_div_1 = document.getElementById('mov_div_1');
  set_coords_in_js = true;

  function update_coordinates( newX, newY ) {
    document.getElementById('coordinate_x').innerHTML = newX;
    document.getElementById('coordinate_y').innerHTML = newY;
  }

  // why do I need to set these here in javascript when they are set in css?
  if( set_coords_in_js ) {
    mov_div_1.style.left = '80px';
    mov_div_1.style.top  = '80px';
  }

  update_coordinates( mov_div_1.style.left, mov_div_1.style.top );

  mov_div_1.onmousedown = function(e){
    mov_div_1.style.backgroundColor = 'black';
    mov_div_1.style.color = 'white';
    var div_left = parseInt( mov_div_1.style.left, 10 );
    var div_top  = parseInt( mov_div_1.style.top,  10 );
    var startX   = e.clientX;
    var startY   = e.clientY;
    mov_div_1.onmousemove = function(e){
      var newX = ( div_left + e.clientX - startX );
      var newY = ( div_top  + e.clientY - startY );
      mov_div_1.style.left = newX + 'px';
      mov_div_1.style.top  = newY + 'px';
      update_coordinates( mov_div_1.style.left, mov_div_1.style.top );
    };
  };

  mov_div_1.onmouseup = function(){
    mov_div_1.onmousemove = null;
    mov_div_1.style.backgroundColor = '';
    mov_div_1.style.color = '';
  };

};
</script>

</head>
<body>

<div class='movDiv' id='mov_div_1'>[ Click &amp; Drag Me Around (slowly) ]</div>

<p>Coordinates:
<span id='coordinate_x' class='coordinates_display'></span> x
<span id='coordinate_y' class='coordinates_display'></span></p>

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    See this related question. When you access element.style, you’re not accessing the computed style (which includes stylesheet declarations), you’re accessing the “style” attribute on the element itself. So when you try to get a value from mov_div_1.style, no style attribute is available, and it will come back as an empty string.

    To fix this, you need to use either element.currentStyle (older IE versions, I think) or element.getComputedStyle() (modern browsers):

    var computedStyle = mov_div_1.currentStyle || getComputedStyle(mov_div_1);
var div_left = parseInt( computedStyle.left, 10 );
var div_top  = parseInt( computedStyle.top,  10 );

    See the working jsFiddle here.

    • 0