diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js
index f8e8f5519f81c44edc874e07bfc758a03385a0c8..5afe97a24888b9c41be84554b3c487b38f0665c7 100644
--- a/javascript/src/Plugins/qfq.fabric.js
+++ b/javascript/src/Plugins/qfq.fabric.js
@@ -44,6 +44,8 @@ $(function (n) {
         this.userChangePossible = false;
         this.overObject = false;
         this.selectionActive = false;
+        this.dragAndDrop = false;
+        this.dndData = '';
 
         // Handles button states and generation of said buttons. Should be renamed.
         function ModeSettings() {
@@ -225,10 +227,16 @@ $(function (n) {
                     src: o.url
                 });
                 $emojiField.append($img);
-                $img.on("click", function() {
-                    that.qFabric.emojiAdd(o.url);
-                    console.log(o.name + " clicked");
+                $img.on("mousedown", function(e) {
+                    console.log(o.name + " mouseDown");
+                    that.qFabric.dragAndDrop = true;
+                    that.qFabric.dndData = o.url;
+                    $("window").mousedown();
                 });
+                $img.on("mouseout", function(e) {
+                    console.log("Mouse Out Event");
+                    that.qFabric.dndMouseOutEvent(e);
+                })
             })
         };
 
@@ -305,10 +313,25 @@ $(function (n) {
         this.canvas.on('object:selected', function(e) { that.defaultSelectionCreateHandler(e) });
         this.canvas.on('selection:cleared', function(e) { that.defaultSelectionClearHandler(e) });
         window.addEventListener('keydown', function(e) { that.defaultKeyStrokeHandler(e) });
+        window.addEventListener('mouseup', function(e) { that.windowMouseUpEvent(e) });
         $('.canvas').on('contextmenu', function(e) { that.defaultRightClickEvent(e) });
         $(window).resize(function() { that.resizeCanvas(); });
     };
 
+    n.Fabric.prototype.windowMouseUpEvent = function(e) {
+        if (this.dragAndDrop) {
+            this.emojiAdd(this.dndData, e);
+            this.dndData = '';
+            this.dragAndDrop = false;
+        }
+    };
+
+    n.Fabric.prototype.dndMouseOutEvent = function(e) {
+        if (this.dragAndDrop) {
+            $('window').mousedown(e);
+        }
+    };
+
     n.Fabric.prototype.resizeCanvas = function () {
         var newWidth = this.parentElement.innerWidth();
         if (newWidth != this.canvas.width) {
@@ -375,14 +398,15 @@ $(function (n) {
         this.panning = false;
     };
 
-    n.Fabric.prototype.emojiAdd = function(uri) {
+    n.Fabric.prototype.emojiAdd = function(uri, o) {
         var that = this;
+        var pointer = this.canvas.getPointer(o.e);
         fabric.Image.fromURL(uri, function(oImg) {
             oImg.set({
-                left: 30,
-                top: 30,
-                height: 32,
-                width: 32
+                left: pointer.x - 32,
+                top: pointer.y - 32,
+                height: 64,
+                width: 64
             });
             that.canvas.add(oImg);
         });
@@ -523,6 +547,7 @@ $(function (n) {
 
     // Default Canvas mouse events are currently strangely implemented.
     n.Fabric.prototype.defaultMouseUpEvent = function(e) {
+        console.log("Default Mouse Up Event");
         if (this.moveMode) {
             this.deactivatePanning();
         }
@@ -535,6 +560,11 @@ $(function (n) {
         if (this.isZoomMode) {
             this.zoomCanvas(e, 0.1);
         }
+
+        if (this.dragAndDrop) {
+            console.log("dnd mouseUp");
+
+        }
     };
 
     n.Fabric.prototype.defaultMouseOutEvent = function(e) {