Search the Community

Hello I've been messing around with a small script i've put together from reading various different turorials about drag and drop. I just cannot get removeEventListener to work.. Basically you can begin dragging but the element is stuck on the mouse and you cannot drop it. I've been able to set a variable to toggle on and off to stop it from dragging but I want to understand how to use removeEventListener incase I need it in the future. I appreciate any help. I've posted all of the code at the following JS Fiddle, however for some reason the dragging won't work at all on JS Fiddle: (sorry I'm new to js fiddle) http://jsfiddle.net/7wpxa4tm/ That exact same code does work for me on all browsers back to IE9. It will begin dragging, and then the remove listener which is in the "ignore" method just will not work. Does anyone see any obvious reason for this? I've been messing with this for two days, I've read around a bunch and thought that I realized my problem when I found that you can't use anonymous functions as callbacks as I was previously doing, but even after setting my callbacks to variables it still won't work. Here is the code posted below if that is prefered: EDIT: Sorry the problem is located in D.drag.release() EDIT 2: JFiddle is now loading, had the onload setting wrong, now you can see the problem with the remove listener http://jsfiddle.net/7wpxa4tm/6/ var DragElement = function() {var D = this;this.elem = null;this.offsetX = 0;this.offsetY = 0; this.init = function() { D.anch = document.getElementById('drag-anchor'); D.elem = document.getElementById('wig'); console.log('D.init()'); var call_back = function(event) { console.log('mousedown'); D.drag.anchor(event); }; D.listen(D.anch, 'mousedown', call_back); } this.listen = function(elem, evt, handler) { if (elem.addEventListener) { elem.addEventListener(evt, handler, false); return true; } else if (elem.attachEvent) { return elem.attachEvent('on' + evt, handler); } else { evt = 'on'+evt; if(typeof elem[evt] === 'function'){ handler = (function(f1, f2){ return function(){ f1.apply(this, arguments); f2.apply(this, arguments); } })(elem[evt], handler); } elem[evt] = handler; return true; } return false; } this.ignore = function(elem, evt, handler) { if (elem.removeEventListener) { elem.removeEventListener (evt, handler, false); } if (elem.detachEvent) elem.detachEvent ('on'+evt, handler); } this.drag = { 'dragging' : false, 'release' : function(event) { //D.drag.dragging = false; I can use this dragging boolean to control if it drags or not..but I want to know how to use the remove listener /******** the following remove event method (ignore) will not work...*****/ var call_back = function(event) { D.drag.move(event); }; D.ignore(D.anch, 'mousemove', call_back); }, 'anchor' : function(event){ D.drag.dragging = (D.drag.dragging) ? false : true; D.offsetY = event.clientY-parseInt(D.elem.offsetTop); D.offsetX = event.clientX-parseInt(D.elem.offsetLeft); var call_back = function(event) { D.drag.move(event); }; D.listen(D.anch, 'mousemove', call_back); }, 'move' : function(event) { if(!D.drag.dragging) return; D.elem.style.position = 'absolute'; var top = (event.clientY-D.offsetY); var left = (event.clientX-D.offsetX); D.elem.style.top = top + 'px'; D.elem.style.left = left + 'px'; var call_back = function(event) { D.drag.release(event); }; D.listen(D.anch, 'mouseup', call_back); } }}var drag = new DragElement();drag.listen(window, 'load', function(event) { drag.init(event);}); EDIT 2: JFiddle is now loading, had the onload setting wrong, now you can see the problem with the remove listener http://jsfiddle.net/7wpxa4tm/6/ Edit 3: I just tried returning the removeEventListener function and outputting it to the console, it is "undefined" I guess the problem is how I am passing the function in, or saving the function, but I don't see a way to do it differently