JS drag components to learn how to use _ javascript

This article mainly introduces the development process of JS drag-and-drop components and how to correctly use JS drag-and-drop components. Interested partners can refer to the JS Code that needs to be frequently written, otherwise, it is easy to get unfamiliar. Although I have been looking at knowledge points such as JS prototype and behavior delegation recently, the amount of code written by me is slightly reduced. This article will share with you a drag-and-drop component for your reference. The details are as follows:

First, let's take a look at the drag principle.

The change of the left value is actually the change of the horizontal direction of the mouse position. e. clientX-e. clientX when the left mouse button is pressed.
The change in the top value is actually the change value in the vertical direction of the mouse position. e. clientY-when the left mouse button is pressed, e. clientY.
The other is to setDrag range, The upper, lower, and left cannot exceed the region where the parent element is located.

Function Drag (config) {this. moveTarget = document. getElementById (config. id); if (config. parentId) {this.tar getParent = document. getElementById (config. parentId); this. max_left = this.tar getParent. clientWidth-this. moveTarget. offsetWidth; this. max_top = this.tar getParent. clientHeight-this. moveTarget. offsetHeight;} else {lele.log(document.doc umentElement. clientHeight + "|" + this. moveTarget. off SetHeight) this. max_left = document.doc umentElement. clientWidth-this. moveTarget. offsetWidth-parseInt (this. getStyle (document. body, "border-width"); this. max_top = document.doc umentElement. clientHeight-this. moveTarget. offsetHeight-parseInt (this. getStyle (document. body, "border-width");} this. lock = true;} Drag. prototype. getStyle = function (element, attr) {if (element. currentStyle) {return e Lement. currentStyle [attr];} else {return window. getComputedStyle (element, null ). getPropertyValue (attr)} Drag. prototype. moDown = function (e) {e = e | window. event; this. clientX = e. clientX; this. clientY = e. clientY; // left and top values of drag (written in style or css) when you press the mouse. this. startLeft = parseInt (this. moveTarget. style. left | this. getStyle (this. moveTarget, "left"); this. startTop = parseInt (this. moveTarget. sty Le. top | this. getStyle (this. moveTarget, "top"); // when the mouse is pressed, The clientX value of the mouse and the clientY value of this. startClientX = e. clientX; this. startClientY = e. clientY; this. lock = false ;}; Drag. prototype. moMove = function (e) {e = e | window. event; if (e. which! = 1) {this. lock = true;} if (! This. lock) {var realLeft = this. startLeft + e. clientX-this. startClientX; // The actual moving range var realTop = this. startTop + e. clientY-this. startClientY; // rightLeft, rightTop; // left, top value (within the movable range) var rightLeft = realLeft> this. max_left? This. max_left: (realLeft> 0? RealLeft: 0); var rightTop = realTop> this. max_top? This. max_top: (realTop> 0? RealTop: 0); this. moveTarget. style. left = rightLeft + "px"; this. moveTarget. style. top = rightTop + "px" ;}}; Drag. prototype. moUp = function (e) {e = e | window. event; this. lock = true ;}; Drag. prototype. startDrag = function () {console. log (this) this. moveTarget. onmousedown = function (e) {this. moDown (e )}. bind (this); this. moveTarget. onmousemove = function (e) {this. moMove (e )}. bind (this); this. moveTarget. onmouseup = function (e) {this. moUp (e )}. bind (this );}

Note:When the moDown responds to the left mouse click, The moMove responds to the mouse move operation, and the MoUp responds to the mouse lift operation.

Added e. which judgment, e. which = 1 indicates that the left mouse button is pressed. This is to solve the problem. When you move the mouse out of the drag range and back, you do not need to press the left mouse button. The dragged element will follow the Bug.

Instructions for use:

When used, the id of the dragged element is a required parameter. the id of the parent element (that is, the range that can be dragged and moved) is an optional parameter. If the id of the parent element is not passed, by default, documentElement is used as the drag range.

If the parent element is passed, do not forget to set the parent element to position: relative or position: absolute.

When using the plug-in, first introduce the js file of the drag-and-drop plug-in.

      
     
     
     
     
     Document