Beyamor · September 16, 2013 20:57 · Sep 16, 2013
diff --git a/drag.coffee b/drag.coffee
@@ -0,0 +1,73 @@
+class Canvas
+	constructor: (@width, @height) ->
+		@el = $ "<canvas>"
+		@context = @el[0].getContext "2d"
+
+		@el.width width
+		@el.height height
+		@context.canvas.width = width
+		@context.canvas.height = height
+
+		$("body").append @el
+
+	drawRect: ({x: x, y: y, width: width, height: height, color: color}) ->
+		@context.beginPath()
+		@context.fillStyle = color
+		@context.fillRect x, y, width, height
+
+	clear: ->
+		@drawRect {
+			x: 0
+			y: 0
+			width: @width
+			height: @height
+			color: "white"
+		}
+
+class Box
+	constructor: (@canvas, x, y, @width, @height) ->
+		@setPos {x: x, y: y}
+
+	containsPoint: ({x: x, y: y}) ->
+		(x >= @x - @width/2) and (x <= @x + @width/2) and
+			(y >= @y - @height/2) and (y <= @y + @height/2)
+
+	setPos: ({x: x, y: y}) ->
+		@x = x
+		@y = y
+		@redraw()
+
+	redraw: ->
+		@canvas.clear()
+		@canvas.drawRect {
+			x: @x - @width/2
+			y: @y - @height/2
+			width: @width
+			height: @height
+			color: "red"
+		}
+
+relativePos = (e, el) ->
+	relX = e.pageX - el.parent().offset().left
+	relY = e.pageY - el.parent().offset().top
+	return {x: relX, y: relY}
+
+watchForDragging = (box, el) ->
+	isBeingDragged = false
+	el.bind "mousedown", (e) ->
+		pos = relativePos e, el
+		if box.containsPoint pos
+			isBeingDragged = true
+			box.setPos pos
+
+	el.bind "mousemove", (e) ->
+		if isBeingDragged
+			box.setPos relativePos e, el
+
+	el.bind "mouseup", (e) ->
+		isBeingDragged = false
+
+$ ->
+	canvas = new Canvas 640, 480
+	box = new Box canvas, 0, 0, 50, 50
+	watchForDragging box, canvas.el