Drag and drop GUI with native JavaScript Currently I'm engaged with implementing a Drag and Drop GUI. 
I've discovered that there a not many resources (tutorials, etc.) available. So I wrote this:



function Cursor(cssSelector, rightLimit, bottomLimit) {
    var element = document.querySelector('#square');
    var styles = window.getComputedStyle(square);
    var x = 0;
    var y = 0;
    var fromLeft = 0;
    var fromTop = 0;
    var pushed = false;
    var limits = {
        top: 0,
        right: rightLimit,
        bottom: bottomLimit,
        left: 0
    }

    // Uses the offsetX and the offsetY of the 
    //  mousedown event.
    this.setCoordinates = function(left, top) {
      if (!fromLeft &amp;&amp; !fromTop) {
        fromLeft = left;
        fromTop = top;
      } 
    }

    this.togglePushed = function() {
        pushed ? pushed = false : pushed = true;
    }

    this.getPushed = function() {
        return pushed;
    }

    // Uses the offsetX and the offsetY of the 
    //   mousemove event.
    this.moveCursor = function(offsetX, offsetY) {
      // How much have the x and the y coordinate
      //   changed since the mousedown event?
      var tmpX = offsetX - fromLeft;
      var tmpY = offsetY - fromTop;

      if ((x + tmpX) &lt;= limits.right &amp;&amp; (x + tmpX) &gt;= limits.left &amp;&amp;
          (y + tmpY) &gt;= limits.top &amp;&amp; (y + tmpY) &lt;= limits.bottom) {
        // If the values are valid then store them ...
        x += tmpX;
        y += tmpY;
        // ... and use them to move the element.
        element.style.left = x + 'px';
        element.style.top = y + 'px';
      }
    }  
  }

  var cursor = new Cursor('#square', 550, 450);

  square.addEventListener('mousedown', function(ev) {
    cursor.togglePushed();
    cursor.setCoordinates(ev.offsetX, ev.offsetY);
  });

  document.body.addEventListener('mouseup', function(ev) {
    cursor.togglePushed();
  });

  square.addEventListener('mousemove', function(ev) {
    if (cursor.getPushed()) { 
      cursor.moveCursor(ev.offsetX, ev.offsetY);
    }
  });
body {
  background-color: #eefafa;
}

#wrap {
  width: 600px;
  margin: 50px auto;
}

#panel {
  height: 500px;
  position: relative;
  background-color: rgba(150, 150, 150, 0.2);
  border-radius: 3px;
}

#square {
  width: 50px;
  height: 50px;
  background-color: orangered;
  border: 1px solid teal;
  border-radius: 3px;
  position: absolute;
  top: 0px;
  left: 0px;
}

.instruct {
  font-size: 125%;
  font-weight: bold;
  font-family: helvetica;
}
&lt;div id="wrap"&gt;
  &lt;p class="instruct"&gt;
      Click the square. Keep the mouse-button pushed and
        move the pointer slowly.
  &lt;/p&gt;

  &lt;div id="panel"&gt;
    &lt;div id="square"&gt;&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt; 




There's also a demo on CodePen.
Events
Instead of adding 3 (permanent) EventListener, you could just keep the first one: square.addEventListener('mousedown'... and when this is triggered, add the 2 other events mouseup and mousemove on the document (it will also enalbe the user to move quickly)
The mouseup event should then simply remove the 2 event listeners (you will need to keep a trace of the EventListeners).
You can then get rid off the pushed variable.
The square.addEventListener could be moved inside the constructor.
moveCursor
In the method moveCursor instead of moving only if the new position is completely in the area, you could separately check the X and Y coordinates (It will then be easier to move near the edges).
Naming
I don't find the name Cursor to be very expressive... maybe Draggable is a better name?