How to draw a box at a set coordination

Question

I want to have a function that draws a box in the coordinates x and y. I can't find a guide that doesn't answer more/less than what i want. Thank's in advance.

Answer 1

I wrote this script some time ago so there may be ways to update it, but the idea is to get the position of the cursor onmousedown and attach an onmousemove listener. Each time you move the mouse you adjust th size of the box based on the position. Then on mouseup you remove the onmousemove listener.

https://jsfiddle.net/47nmp90w/

dragBox = (function() {

  var _curX;
  var _curY;
  var _workingEl;
  var _docEl = document.documentElement;

  if (_docEl.scrollTop === 0) {
    var testDocEl = _docEl.scrollTop;
    _docEl.scrollTop++;
    _docEl = testDocEl+1 === _docEl.scrollTop-- ? _docEl : document.body;
  }

  return {

    drag: function(e) {
      var evt = e ? e : window.event;
      _width = Math.abs(_curX - evt.clientX);
      _height = Math.abs(_curY - evt.clientY);
      if (evt.shiftKey) {
        var minDimension = Math.min(_width, _height) + 'px';
        _workingEl.style.width = minDimension;
        _workingEl.style.height = minDimension;
      } else {
        _workingEl.style.width = _width + 'px';
        _workingEl.style.height = _height + 'px';
      }
      _workingEl.style.left = Math.min(_curX, evt.clientX) + _docEl.scrollLeft + 'px';
      _workingEl.style.top = Math.min(_curY, evt.clientY) + _docEl.scrollTop + 'px';
    },

    draw: function(e) {
      var evt = e ? e : window.event;
      if (evt.which === 1) {
        _curX = evt.clientX;
        _curY = evt.clientY;
        _workingEl = document.createElement('div');
        _workingEl.className = 'drawing';
        document.body.appendChild(_workingEl);
        window.onmousemove = dragBox.drag;
        window.onmouseup = function() {
          window.onmousemove = null;
          _workingEl.className = 'done';
          _workingEl = false;
        }
      }
    }

  };

})();
window.onmousedown = dragBox.draw;

Edit

Here is how you would create a box with a set a data. You just set height and width styles, then give it a left position equal to your x coordinate and a top position of your y coordinate.

https://jsfiddle.net/RDay/47nmp90w/4/

var createButton = document.getElementById('create');
var xPosInput = document.getElementById('x-pos');
var yPosInput = document.getElementById('y-pos');
var widthInput = document.getElementById('width');
var heightInput = document.getElementById('height');
var target = document.getElementById('target');

createButton.onclick = function() {
  var xPos = xPosInput.value;
  var yPos = yPosInput.value;
  var width = widthInput.value;
  var height = heightInput.value;

  var box = document.createElement('div');
  box.className = 'box';
  box.style.left = xPos + 'px';
  box.style.top = yPos + 'px';
  box.style.width = width + 'px';
  box.style.height = height + 'px';
  box.style.left = xPos + 'px';

  target.appendChild(box);

};