diff --git a/javascript/src/Plugins/qfq.fabric.js b/javascript/src/Plugins/qfq.fabric.js index 5afe97a24888b9c41be84554b3c487b38f0665c7..996177aa2224b881e15c2f5c27e0760fe8174cc6 100644 --- a/javascript/src/Plugins/qfq.fabric.js +++ b/javascript/src/Plugins/qfq.fabric.js @@ -224,19 +224,16 @@ $(function (n) { this.emojis.forEach(function (o) { $img = $("<img>", { class: o.class, - src: o.url + src: o.url, + draggable: true }); $emojiField.append($img); - $img.on("mousedown", function(e) { + $img.on("dragstart", 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); - }) }) }; @@ -267,6 +264,7 @@ $(function (n) { n.Fabric.prototype.generateCanvas = function() { var canvas = document.createElement('canvas'); + canvas.setAttribute('draggable', true); var controlElement = $('<div>', { id: 'qfq-fabric-control' }); @@ -313,12 +311,11 @@ $(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.addEventListener('dragend', function(e) { that.dragEndEvent(e) }); $(window).resize(function() { that.resizeCanvas(); }); }; - n.Fabric.prototype.windowMouseUpEvent = function(e) { + n.Fabric.prototype.dragEndEvent = function(e) { if (this.dragAndDrop) { this.emojiAdd(this.dndData, e); this.dndData = '';