Handwriting drag function

Key points:

ClientX and clientY

The property name explain
clientX Horizontal coordinates relative to the viewport when the event is triggered. Mouseevent. x is the alias of the MouseEvent. ClientX property
clientY The vertical coordinates relative to the viewport when the event is triggered. The mouseEvent. y attribute is another name for the MouseEvent. ClientY attribute.

MovementX, movementY

The property name explain
movementX Horizontal mouse movement value between the last Mousemove event and the last Mousemove event.
movementY Horizontal mouse movement value between the last Mousemove event and the last Mousemove event.

OffsetX, offsetY

The property name explain
offsetX The X offset from the destination node’s padding edge.
offsetY The Y offset from the target node’s padding edge.

PageX, pageY

The property name explain
pageX X (horizontal) coordinates relative to the entire document.
pageY Y coordinate relative to the entire document.

ScreenX, screenY

The property name explain
screenX Horizontal coordinates of the mouse on the screen.
screenY Horizontal coordinates of the mouse on the screen.

Element.getBoundingClientRect()

The Element getBoundingClientRect () method returns a DOMRect object, provide relevant Element size and its location information relative to the viewport.

domRect = element.getBoundingClientRect(); The return value is a DOMRect object, which is the smallest rectangle containing the entire element, including its fill and border width. The left, top, right, bottom, x, y, width, and height properties describe the position and size of the overall rectangle in the pixel. The attributes other than width and height are relative to the upper-left corner of the viewport.

Native JS implementation

  • Mousedown Indicates the event that the mouse is pressed down
  • Mousemove Mouse movement event
  • Mouseup Mouse lift event
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Manually implement drag and drop</title>
</head>
<body>
  <div id="father"></div>
</body>
</html>
<style>
#father {
  position: absolute;
  width: 100px;
  height: 100px;
  background: gray;
}
</style>
<script>
let elem = document.getElementById("father");
let mouseX,mouseY;
let dragging=false;
elem.addEventListener('mousedown'.function(event){
  dragging=true;
  let elemRect = elem.getBoundingClientRect();
  mouseX=event.clientX-elemRect.left;
  mouseY=event.clientY-elemRect.top;
  console.log('The picture is being picked up')
})
elem.addEventListener('mouseup'.function(event){
  dragging=false;
  console.log('Picture is down')
})
elem.addEventListener('mousemove'.function(event){
  if(dragging){
    elem.style.left=(event.clientX-mouseX)+'px';
    elem.style.top=(event.clientY-mouseY)+'px'; }})</script>
Copy the code

HTML5 native draggable attribute and DataTranfers object

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Manually implement drag and drop</title>
</head>
<style>
  .main {
    display: flex;
    justify-content: space-around;
  }

  .left {
    width: 300px;
    height: 500px;
    margin-right: 10px;
    border: 1px solid red;
    text-align: center;
    box-sizing: border-box;
    padding: 1pxx
  }

  .right {
    width: 300px;
    height: 500px;
    border: 1px solid lightseagreen;
    text-align: center;
    box-sizing: border-box;
    padding: 1px;
  }

  .txt {
    border: 1px solid gray;
    margin: 1px;
    padding: 5px;
    cursor: move;
  }
</style>

<body>
  <main class="main">
    <div class="left" id="left">
      <div class="txt-show">The left area</div>
      <div id='txt1' draggable="true" class="dragable txt txt1">Moveable text one</div>
      <div id='txt2' draggable="true" class="dragable txt txt2">Movable text ii</div>
      <div id='txt3' draggable="true" class="dragable txt txt3">Moveable text three</div>
      <div id='txt4' draggable="true" class="dragable txt txt4">Moveable text four</div>
      <div id='txt5' draggable="true" class="dragable txt txt5">Movable text five</div>
    </div>
    <div class="right" id='right'>
      <div class="txt-show">The right area</div>
    </div>
  </main>

  <script>
    let txtObj = document.getElementsByClassName('txt')
    for (let i = 0; i < txtObj.length; i++) {
      txtObj[i].ondragstart = handle_start
      txtObj[i].ondrag = handle_drag
      txtObj[i].ondragend = handle_end
    }

    function handle_start(e) {
      e.dataTransfer.setData('Text', e.target.id)
      console.log('HANDle_start - Drag start')}function handle_drag(e) {
      console.log('Handle_drag - Dragging')}function handle_end(e) {
      console.log('HANDle_end - Drag end')}let target = document.getElementById('right')
    target.ondragenter = handle_enter
    target.ondragover = handle_over
    target.ondragleave = handle_leave
    target.ondrop = handle_drop

    function handle_enter(e) {
      e.preventDefault()// By default, data/elements cannot be dragged and dropped among other elements.
      // For drop we must prevent default handling of elements
      console.log('HANDle_Enter - Enter the destination')}function handle_over(e) {
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      console.log(returnObj + '-handle_over- within destination range ')}function handle_leave(e) {
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      console.log(returnObj)
      console.log('HANDle_leave - Leave the destination without putting it down')}function handle_drop(e) {
      e.stopPropagation(); // No more events are sent. Resolve the Firefox browser to open a new window.
      e.preventDefault()
      let returnObj = e.dataTransfer.getData('Text')
      if (returnObj) {
        e.target.appendChild(document.getElementById(returnObj))
      }
      console.log(returnObj + '- HANDle_drop - drop in destination ')}</script>
</body>

</html>
Copy the code