                     helper.removeTmpNodes()
 
                 createHelper: (event) ->
-                    console.log(event.currentTarget)
                     $('<div>').css({
                         backgroundImage: "url(" + $(event.currentTarget).attr('src') + ")"
                     }).addClass('customHelper').appendTo('body');
 
-
+                # initialize draggable and droppable elements in the page
+                # Safe to be called multiple times
+                init: () ->
+                    draggable = []
+
+                    initDraggable = (elem) ->
+                        if not elem.jquery_draggable_initialized
+                            elem.jquery_draggable_initialized = true
+                            $(elem).draggable
+                                cursor: "move"
+                                helper: dnd.createHelper
+                                drag: dnd.handleDragEvent
+                                start: dnd.handleStartEvent
+                                stop: dnd.handleStopEvent
+                                disabled: not editable.hasClass('inEditMode')
+                        draggables.push elem
+
+                    $(".rotationWrapper img", widgetOptions.dialog).each (index, elem) ->
+                        initDraggable(elem) if not elem.jquery_draggable_initialized
+
+                    $("img", editable).each (index, elem) ->
+                        elem.contentEditable = false
+                        initDraggable(elem) if not elem.jquery_draggable_initialized
+
+                    $("p", editable).each (index, elem) ->
+                        if not elem.jquery_droppable_initialized
+                            elem.jquery_droppable_initialized = true
+                            $('p', editable).droppable
+                                tolerance: "pointer"
+                                drop: dnd.handleDropEvent
+                                over: dnd.handleOverEvent
+                                out: dnd.handleLeaveEvent
+
+                enableDragging: () ->
+                    jQuery.each draggables, (index, d) ->
+                        jQuery(d).draggable('option', 'disabled', false)
+
+                disableDragging: () ->
+                    jQuery.each draggables, (index, d) ->
+                        jQuery(d).draggable('option', 'disabled', true)
+
+            draggables = []
             editable = $(@options.editable.element)
+            # keep a reference of options for context changes
+            widgetOptions = @options
             offset = editable.offset()
             third = parseFloat(editable.width() / 3)
             overlayMiddleConfig =

                    $(document).trigger('stopPreventSave');

                handleDropEvent: (event, ui) ->
                    # check whether it's an internal drop or not
                    internalDrop = helper.checkOrigin(event)
                    helper.removeTmpNodes()
                    position = helper.calcPosition(ui, offset, internalDrop)
                    imageInsert = helper.createInsertElement(ui, false)
                    if position is "middle"
                        imageInsert.css('display', 'block')


                handleStopEvent: (event, ui) ->
                    internalDrop = helper.checkOrigin(event)
                    if internalDrop
                        $(event.target).remove()
                    else
                        editable.trigger('change')

                    overlay.big.hide()
                    overlay.left.hide()
