I'm trying to create a wrapper for the DOM, which would give the opportunity to drag any element of the page with the mouse.

After the page loads, when moving the mouse on the document object, random numbers are written into the two page elements. After you move the square and move the mouse over the document again, the random numbers are no longer written into the necessary elements (I’ve done something with events, apparently), and now they are written only during the dragging. What could be the problem?

Link to the code itself: http://jsfiddle.net/6H48h/ .

<html> <head> <script src="fr.js"></script> <title>trouble</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <script> function mj(data) { if (typeof (data) != 'object') { if (!data) { data = document.body; } else { if (data.substr(0, 1) == '.') { data = document.getElementsByClassName(data.substr(1, data.length)); } else if (data.substr(0, 1) == '#') { data = document.getElementById(data.substr(1, data.length)); } else { data = document; } } } if (!data.oper) { data.oper = new Operation(data); } return data.oper; } function Operation(data) { this.obj = data; this.arrLaunch = { onmousemove: [], onclick: [], onmousedown: [], onmouseup: [] } return this; } //binders Operation.prototype = { mousemove: function (func) { var self = this; this.arrLaunch['onmousemove'].push(func); if (!this.obj.onmousemove) this.obj.onmousemove = function (e) { self.launch('onmousemove'); }; }, click: function (func) { var self = this; this.arrLaunch['onclick'].push(func); if (!this.obj.onclick) this.obj.onclick = function (e) { self.launch('onclick'); }; }, mousedown: function (func) { var self = this; this.arrLaunch['onmousedown'].push(func); if (!this.obj.onmousedown) this.obj.onmousedown = function (e) { self.launch('onmousedown'); }; }, mouseup: function (func) { var self = this; this.arrLaunch['onmouseup'].push(func); if (!this.obj.onmouseup) this.obj.onmouseup = function (e) { self.launch('onmouseup'); }; }, //setters launch: function (type) { for (var i = 0; i <= this.arrLaunch[type].length - 1; i++) this.arrLaunch[type][i](); }, getCoords: function (elem) { var box = elem.getBoundingClientRect(); var body = document.body; var docElem = document.documentElement; var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; var clientTop = docElem.clientTop || body.clientTop || 0; var clientLeft = docElem.clientLeft || body.clientLeft || 0; var top = box.top + scrollTop - clientTop; var left = box.left + scrollLeft - clientLeft; return { top: Math.round(top), left: Math.round(left) }; }, getEvent: function (e) { return e || window.event; }, drag: function (data) { var drag = this.obj; var self = this; mj(drag).mousedown(function (e) { e = mj(drag).getEvent(e); var coords = mj(drag).getCoords(drag); var shiftX = e.pageX - coords.left; var shiftY = e.pageY - coords.top; mj(document).mousemove(function (e) { e = mj(drag).getEvent(e); drag.style.left = e.pageX - shiftX + 'px'; drag.style.top = e.pageY - shiftY + 'px'; drag.style.position = 'absolute'; if (data && data['opacity']) drag.style.opacity = data['opacity'].split(',')[0]; if (data && data['cursor']) drag.style.cursor = data['cursor'].split(',')[0]; }); }); mj(drag).mouseup(function () { if (data && data['cursor']) drag.style.cursor = data['cursor'].split(',')[1]; if (data && data['opacity']) drag.style.opacity = data['opacity'].split(',')[1]; if (data && data['stop']) data['stop'](); document.onmousemove = document.ondragstart = document.body.onselectstart = null; }); drag.ondragstart = function () { return false; }; } } window.onload = function () { mj(document).mousemove(function () { q.innerHTML = Math.random(); }); mj(document).mousemove(function () { w.innerHTML = Math.random(); }); mj('#drag').drag({ opacity: '0.7,1', cursor: 'move,auto' }); } </script> <body> <div id="q">0</div> <div id="w">0</div> <div id="drag" style="background-color: green; width: 50px; height: 50px;"></div> </body> </html>


2 answers 2

You have two handlers for document.onmousemove. one is added to window.onload second to drag for diva. And on the mouseup for the diva you clean both at once:

 document.onmousemove = null;

You do not have the option to remove one unnecessary handler, and the cleaning of the methods goes wrong. If there is another mj (document) .mousemove, then there will already be three handlers, then more.

Apparently there is some kind of bike, it’s hard to advise something ...

  • And how to clean the methods? I understand that you need to radically change the structure, can you advise what changes need to be made? - LightShock
  • You have methods that accumulate in the array, hence some sort of cleaning function is needed for this array, but this is not relevant ... IMHO, it would be better not to remove handlers from objects, but to expose some kind of global flag for them - whether they act or not . set the flag dragging = true on mousedown, mouseup - remove dragging = false. and in the mousemove handler, we check for pull or not ... - Yura Ivanov
  • Thanks, I'll try later :) - LightShock

What is not happy with draggable or drag-js ?

Using frameworks makes life easier.

  • The fact that I really want to try to do without frameworks. - LightShock
  • And what is the reason for such a desire, if not a secret? - Chad
  • one
    Just wondering how everything works from the inside) I want to myself (even if I resort to someone's help) to write something interesting. - LightShock
  • one
    Good luck in your endeavors! The main thing is not to break down when there is only one routine left; bring it to the end. - Chad