JS drag-and-drop components for learning and use. js drag-and-drop Components

JS drag-and-drop components for learning and use. js drag-and-drop Components

JavaScript code needs to be frequently written, otherwise it is easy to get unfamiliar. Recently, although I have been looking at knowledge points such as JavaScript prototype and behavior delegation, 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.

<! Doctype html> 
If you want to drag an element in the window, do not set the position of the parent element of the dragged element to position it relative to the body.
If you need to locate the body, but you need to set the position of its parent element to a non-static one, you can expand the plug-in.
I hope this article will help you learn about javascript programming.
Articles you may be interested in:

 

 
  
Baidu Popup. js pop-up box evolutionary version drag and drop small framework release compatible with IE6/7/8, Firefox, Chrome
 
  
Js table sorting (editing, dragging, and scaling)
 
  
Analysis of Effects and dom-drag.js of a js drag
 
  
Js pop-up layer and drag and drop
 
  
About js drag-and-drop upload [a drag-and-drop upload process for modifying an avatar]
 
  
Div drag plug-in -- JQ. MoveBox. js (self-made JQ plug-in)
 
  
Javascript drag and drop upload class library DropzoneJS usage
 
  
Js perfect div drag-and-drop instance code
 
  
Nodejs + express + html5 implement drag-and-drop upload