Example of js Implementation of Simple Drag and Drop
- 2021-09-11 19:11:57
- OfStack
Simple drag
Directory
Code instanceCode parsing
Differences among scrollWidth, clientWidth and offsetWidth
Discrimination of offsetX, clientX and pageX
Download source link
Code instance
<div id="box" style="background: #334;width: 100px;height: 100px;position: absolute;cursor: move;"></div>
(function () {
var dragging = false
var boxX, boxY, mouseX, mouseY, offsetX, offsetY
var box = document.getElementById('box')
// The action of pressing the mouse
box.onmousedown = down
// The movement of the mouse
document.onmousemove = move
// The action of releasing the mouse
document.onmouseup = up
// Function after mouse press ,e Is an event object
function down(e) {
dragging = true
// Gets the coordinates of the element
boxX = box.offsetLeft
boxY = box.offsetTop
// Get the coordinates where the mouse is located
mouseX = parseInt(getMouseXY(e).x)
mouseY = parseInt(getMouseXY(e).y)
// Coordinates of the mouse relative to the left and upper edges of the element
offsetX = mouseX - boxX
offsetY = mouseY - boxY
}
// Function called by mouse movement
function move(e){
if (dragging) {
// Gets the coordinates of the moved element
var x = getMouseXY(e).x - offsetX
var y = getMouseXY(e).y - offsetY
// Calculate the size of the movable position, Ensure that the element does not exceed the movable range
var width = document.documentElement.clientWidth - box.offsetWidth
var height = document.documentElement.clientHeight - box.offsetHeight
// min Method ensures that the right boundary is not exceeded, max Guarantee that it will not exceed the left boundary
x = Math.min(Math.max(0, x), width)
y = Math.min(Math.max(0, y), height)
// Position elements in time
box.style.left = x + 'px'
box.style.top = y + 'px'
}
}
// Function that releases the mouse
function up(e){
dragging = false
}
// The function is used to get the position of the mouse
function getMouseXY(e){
var x = 0, y = 0
e = e || window.event
if (e.pageX) {
x = e.pageX
y = e.pageY
} else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft
y = e.clientY + document.body.scrollTop - document.body.clientTop
}
return {
x: x,
y: y
}
}
})()
Code parsing
Bind mousemove and mouseup events on an document object and not on a dragged element because the drag stops when the mouse moves too fast to reach the element, whereas binding on document prevents this from happening. No matter how fast the drag is, it will not exceed the range of document.
// The action of pressing the mouse
box.onmousedown = down
// The movement of the mouse
document.onmousemove = move
// The action of releasing the mouse
document.onmouseup = up
HTMLElement. offsetLeft is a read-only property that returns the pixel value of the current element's upper-left corner offset from the left boundary of the HTMLElement. offsetParent node.
// Gets the coordinates of the element
boxX = box.offsetLeft
boxY = box.offsetTop
1 The mouse position is obtained using pageX/pageY, but IE does not support these two properties. Therefore, event. clientX + document. body. scrollLeft-document. body. clientLeft is used in IE; Get the position of the mouse
if (e.pageX) {
x = e.pageX
y = e.pageY
} else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft
y = e.clientY + document.body.scrollTop - document.body.clientTop
}
Differences between scrollWidth, clientWidth and offsetWidth
Definition
scrollWidth: The width of the actual content of the object, excluding the edge width clientWidth: The width of the viewable area of the object's content, excluding the width of the sideline offsetWidth: The actual width of the whole object, including scroll bars and other edges
Situation 1
There is no content in the element or the content does not exceed the visual area, and scrolling does not appear or is unavailable
scrollWidth = clientWidth
offsetWidth is the actual width of the element
Situation 2
The content of the element exceeds the visual area, and the scroll bar appears and is available
scrollWidth
>
clientWidth
offsetWidth is the actual width of the element
Discrimination of offsetX, clientX and pageX
offsetX,offsetY
The offset of the mouse pointer relative to the upper left corner of the triggering event element. In Chrome, Opera, Safari, it refers to the outer edge, that is, the width of the border of the element, while firefox does not include the border value
pageX,pageY
Refers to the distance from the upper left corner of the document window and does not move with the scroll bar
clientX,clientY
Refers to the distance from the upper left corner of the browser view window, and the reference point moves as the scroll bar scrolls
Download source link
Github of Xinghui
The above is the js implementation of simple drag-and-drop example of the details, more about js implementation of simple drag-and-drop information please pay attention to other related articles on this site!