JSFiddle - React, Tailwind, and code Playground

by nrabinowitz

HTML

<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>

CSS

.movDiv {
  position: absolute;
  left: 80px;
  top:  80px;
  cursor: move;
  border: 1px dashed green;
  padding: 1em;
}
.coordinates_display { font-weight: bold; }

JavaScript

window.onload = function() {
  mov_div_1 = document.getElementById('mov_div_1');
  set_coords_in_js = false; //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 computedStyle = mov_div_1.currentStyle || getComputedStyle(mov_div_1);
    var div_left = parseInt( computedStyle.left, 10 );
    var div_top  = parseInt( computedStyle.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 = '';
  };

};