Page builder

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<section id="pagebuilder" class="pagebuilder-container">
   <div class="toolbar">
      <div class="item draggable" data-tool="text" title="Add Text">
         <span class="glyphicon glyphicon-text-background" aria-hidden="true"></span>
      </div>
      <div class="item draggable" data-tool="image" title="Add Image">
         <span class="glyphicon glyphicon-picture" aria-hidden="true"></span>
      </div>
   </div>
   <div class="canvas"></div>
</section>

CSS

body {
   background-color: #ccc;
}

.pagebuilder-container {
   position: relative;
}

.pagebuilder-container .toolbar {
   display: -webkit-flex;
   -webkit-flex-direction: row;
   -webkit-flex-wrap: wrap;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   background-color: #10100a;
   color: #fff;
   width: 100%;
   position: relative;
   line-height: 16pt;
   font-size: 16pt;
   font-family: Arial;
}

.pagebuilder-container .toolbar .item {
   padding: 15px;
   -moz-user-select: none;
   -webkit-user-select: none;
   -ms-user-select: none;
}

.pagebuilder-container .toolbar .draggable {
   cursor: move;
}

.pagebuilder-container .toolbar .item:hover {
   background-color: #ccc;
   color: #000;
}

.pagebuilder-container .canvas {
   padding: 0;
   margin: 0;
   border-style: none;
   background-color: #fff;
   width: 100%;
   position: relative;
}

.pagebuilder-container .canvas .textbox {
   padding: 0;
   position: absolute;
   font-size: 16pt;
   font-family: Arial;
}

JavaScript

;
'use strict';
(function($, undefined) {

   // Plugin meta & defaults
   var pluginName = 'pageBuilder',
      defaults = {
         pagesizes: {
            'A4': { 
               height: '297mm',
               width: '210mm'
            }
         }
      },
      dragging;

   // Plugin Constructor
   function Constructor(element, options) {
      this.element = element;
      this.options = $.extend({}, defaults, options);
      this._defaults = defaults;
      this._name = pluginName;
      this.init();
   }

   // Plugin prototype
   var plugin = Constructor.prototype = {};

   /**
    * jQuery pageBuilder plugin 
    *
    * @param {Object} options Plugin options as an object of key/value pairs
    * @returns {jQuery}
    */
   $.fn[pluginName] = function(options) {

      return this.each(function() {
         var item = $(this);
         if (!item.data('plugin_' + pluginName)) {
            item.data('plugin_' + pluginName, new Constructor(item, options));
         }
      });
   };

   // init function
   plugin.init = function() {
      this.initDragNDrop();
      this.initPageSize(this.options.pagesizes['A4']);
   };

   plugin.initPageSize = function(pagesize) {
      this.element.innerWidth(pagesize.width).find('.canvas').innerHeight(pagesize.height);
   };

   plugin.getDropPosition = function(target, event) {
      var offset = target.offset();
      return {
         'top': event.clientY - offset.top,
         'left': event.clientX - offset.left
      };
   };

   plugin.initDragNDrop = function() {
      var plugin = this,
         container = plugin.element;
      container.find('.draggable').prop('draggable', true);
      container.on({
         'dragstart': dragstart,
         'dragend': dragend
      }, '.draggable').on({
         'dragover dragenter': dragover,
         'drop': drop
      }, '.canvas');

      function dragstart(e) {
         e.stopPropagation();
         var dt = e.originalEvent.dataTransfer;
         if (dt &&...