This article introduces the implementation of element drag in native javascript.
Ideas:
1. First change the layout attributes of the dragged element, the key is "position:absolue";
2. Capture the mouse events "mousedown", "mousemove", "mouseup";
3. When "mousedown" is triggered, record the relative position of the current mouse in the element, _x,_y;
4. Then process the "mousemove" event and move the element by changing the top and left attributes of the element;
5. When the "mouseup" time is triggered, stop dragging.
At the same time, the encapsulation of the code and browser compatibility should be considered. The code is as follows:
<!DOCTYPE html> <html> <head> <title>draggable div</title> <style type="text/css"> body{ margin: 0; padding: 0; background-color: #fff; } #drag_div{ width: 150px; height: 150px; padding: 10px; margin: 10px; background-color: #66dd33; cursor: move; } </style> </head> </html> <body> <div id="drag_div"></div> </body> <script type="text/javascript"> function Drag () { this.initialize.apply(this, arguments); } Drag.prototype = { // Initialize initialize : function (element, options) { this.element = this.$(element); // The object being dragged this._x = this._y = 0; // The mouse position in the element this._moveDrag = this.bind(this, this.moveDrag); this._stopDrag = this.bind(this, this.stopDrag); // Set the parameter this.setOptions(options); // Set the "handle" object to "drag" with the mouse (note the difference from the object being dragged) this.handle = this.$(this.options.handle); // Set the callback function this.onStart = this.options.onStart; this.onMove = this.options.onMove; this.onStop = this.options.onStop; this.handle.style.cursor = "move"; this.changeLayout(); // Register the start drag event this.addHandler(this.handle, "mousedown", this.bind(this, this.startDrag)); }, // Change the layout attribute of the dragged object changeLayout: function () { this.element.style.top = this.element.offsetTop + "px"; this.element.style.left = this.element.offsetLeft + "px"; this.element.style.position = "absolute"; this.element.style.margin = "0"; }, startDrag : function (event) { var event = event || window.event; this._x = event.clientX - this.element.offsetLeft; this._y = event.clientY - this.element.offsetTop; this.addHandler(document, "mousemove", this._moveDrag); this.addHandler(document, "mouseup", this._stopDrag); this.preventDefault(event); this.handle.setCapture && this.handle.setCapture(); this.onStart(); }, moveDrag : function (event) { var event = this.getEvent(event); var iTop = event.clientY - this._y; var iLeft = event.clientX - this._x; this.element.style.top = iTop + "px"; this.element.style.left = iLeft + "px"; this.onMove(); }, stopDrag : function () { this.removeHandler(document, "mousemove", this._moveDrag); this.removeHandler(document, "mouseup", this._stopDrag); this.handle.releaseCapture && this.handle.releaseCapture(); this.onStop() }, setOptions : function (options) { this.options = { handle: this.element, //Event object onStart : function () {}, //Calling function onMove : function(){}, //Calling function onStop : function(){} //Calling function onStop : function(){} //Calling function onstop }; for(var p in options){ this.options[p] = options[p]; } }, $ : function (id) { return typeof id === "string" ? document.getElementById(id):id; }, addHandler : function (element, eventType, handler) { if(element.addEventListener){ return element.addEventListener(eventType, handler, false); }else{ return element.attachEvent("on"+eventType, handler); } }, removeHandler : function (element, eventType, handler) { if(element.removeEventListener){ return element.removeEventListener(eventType, handler, false); }else{ return element.detachEvent("on" + eventType, handler); } }, getEvent: function (event) { return event || window.event; }, preventDefault: function (event) { if(event.preventDefault){ event.preventDefault(); }else{ event.returnValue = false; } }, bind : function (obj, handler) { return function () { return handler.apply(obj, arguments); } } } }; window.onload = function () { var drag_div = document.getElementById("drag_div"); var drag = new Drag(drag_div, {handle: drag_div}); } </script> </html>