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 && !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) = limits.left &&
(y + tmpY) >= limits.top && (y + tmpY)
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;
}


Click the square. Keep the mouse-button pushed and
move the pointer slowly.





`



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?

StackExchange Code Review Q#113823, answer score: 6