Drag and Drop with Mouse

Introduction

Drag-and-drop functionality is defined as the act of selecting an item or piece of text, moving it (dragging), and then dropping it in another spot. Drag and Drop is a fantastic user interface option. Drag and Drop is a clear and simple way to conduct a variety of activities, from copying and moving documents (as in file managers) to ordering (dropping items into a cart).

There's a section regarding Drag and Drop in the modern HTML standard, with unique events like dragstart, dragend, and so on.

These events enable us to support advanced drag and drop scenarios, such as dragging a file from the OS file manager and dropping it into the browser window. The contents of such files can then be accessed by JavaScript. This blog will learn more about Drag and Drop with the mouse in detail. So, let’s move on with our topic without any further delay!

Also Read, Javascript hasOwnProperty

Drag and Drop Algorithm

The following is the basic Drag and Drop algorithm:

1. On mousedown- If necessary, prepare the element for movement when the mouse is down (maybe create a clone of it, add a class to it or whatever).
2. Then, on mousemove, change the left/top position using position: absolute.
3. On mouseup- Perform all actions necessary to complete the drag and drop on mouseup.
    

Let's learn with the implementation of dragging a ball below:

ball.onmousedown = function(event) {
  // (1) Make absolute and on top by z-index to get ready to move.
  ball.style.position = 'absolute';
  ball.style.zIndex = 1000;
  // It should be moved directly into the body from any current parents.
  // to position it with relation to the body
  document.body.append(ball);
  // (pageX, pageY) coordinates are used to centre the ball.
  function moveAt(pageX, pageY) {
    ball.style.left = pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = pageY - ball.offsetHeight / 2 + 'px';
  }
  // Place our perfectly positioned ball beneath the pointer.
  moveAt(event.pageX, event.pageY);
  function onMouseMove(event) {
    moveAt(event.pageX, event.pageY);
  }
  // (2) On mousemove move the ball
  document.addEventListener('mousemove', onMouseMove);
  // (3) remove unneeded handlers, drop the ball
  ball.onmouseup = function() {
    document.removeEventListener('mousemove', onMouseMove);
    ball.onmouseup = null;
  };
};

When you run the code above, you'll notice something strange: the text "forks" at the start of the process, and you start dragging its clone. This occurs because the browser has its own drag and drop system for various items, such as photos, which runs automatically and competes with yours.

As a result, you must use the following code to disable it:

text.ondragstart = function () {
  return false;
};

Another crucial point to remember is that you track mouse movements on the document rather than the text. However, mouse moves are regularly triggered, but not for each pixel. As a result, your pointer may jump from the text wherever in the document's heart, as well as outside the window, after the transfer.

Source: Tutorial and Example