Template:Groningen/imagedropper js

function ImageDropper(elMove, elTgt, repUrl, callback, strict){ this.elMove = elMove; this.elTgt = elTgt; this.repUrl = repUrl; this.strict = strict;

this.dropped = false; this.dropCallback = callback || function(){};

this.init(); }

ImageDropper.prototype.onDragStart = function(evt){ evt.stopPropagation();

var data = this.repUrl; evt.dataTransfer.effectAllowed = 'move'; evt.dataTransfer.setData('text', data);

return false; };

ImageDropper.prototype.onDragOver = function(evt){ evt.stopPropagation(); evt.preventDefault();

evt.dataTransfer.dropEffect = 'move';

return false; };

ImageDropper.prototype.onDrop = function(evt){ evt.stopPropagation();

evt.dataTransfer.dropEffect = 'move';

var data = evt.dataTransfer.getData('text');

if(this.strict && data !== this.repUrl){ return true; }

evt.preventDefault(); this.elTgt.src = data; this.elMove.style.display = 'none';

this.cleanUp();

this.dropped = true; this.dropCallback(this);

return false; };

ImageDropper.prototype.init = function(){ var img = new Image(); img.src = this.repUrl;

img.onload = function(){ this.elMove.setAttribute('draggable', true); this.elMove.style.cursor = "move"; this.elMove.addEventListener('dragstart', this.onDragStart.bind(this), false); this.elTgt.addEventListener('dragover', this.onDragOver.bind(this), false); this.elTgt.addEventListener('drop', this.onDrop.bind(this), false); }.bind(this);

return this; };

ImageDropper.prototype.cleanUp = function(){ this.elMove.removeEventListener('dragstart', this.onDragStart.bind(this), false); this.elTgt.removeEventListener('dragover', this.onDragOver.bind(this), false); this.elTgt.removeEventListener('drop', this.onDrop.bind(this), false); };