Example of js Implementation of Simple Drag and Drop

  • 2021-09-11 19:11:57
  • OfStack

Simple drag

Directory

Code instance
Code 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!


Related articles: