             # prevent default events
             d3.event.preventDefault()
             d3.event.stopPropagation()
-        )
+
+        d3.select(element).on('mousedown', drag)
 
         # resizing (the window)
         resize = =>

        @draw()

        # dragging
        d3.select(element).on('mousedown', =>
            # init
            element.dragging = { position: [0, 0] } unless element.dragging

            # set last position of the curser
            element.dragging.lastPosition = [d3.event.pageX, d3.event.pageY]

            # event handlers
            d3.select(document)
                .on('mousemove', =>
                    element.dragging.position[0] += d3.event.pageX - element.dragging.lastPosition[0]
                    element.dragging.position[1] += d3.event.pageY - element.dragging.lastPosition[1]
                    element.dragging.lastPosition = [d3.event.pageX, d3.event.pageY]
                    @root.attr('transform', "translate(#{element.dragging.position[0]}, 0)")
                )
                .on('mouseup', =>
                    d3.select(document).on('mousemove', null).on('mouseup', null)

        @originalDisplay = @element.style.display
        @element.style.display = 'none'
        true

    show: ->
        @element.style.display = @originalDisplay
        true
