How to implement drag-and-drop function in JavaScript?

How to implement drag-and-drop function in JavaScript?

Drag-and-drop is one of the commonly used functions in web development, which can increase user interaction experience. This article will introduce how to use JavaScript to implement the drag-and-drop function and give specific code examples.

1. HTML structure
First, we need to create an HTML structure to serve as the target element for dragging. The following is a basic HTML structure example:

<div class="drag-element">拖拽我</div>

In the above code, we create a div element with class drag-element to represent The target element for dragging.

2. CSS Style
In order to make the drag effect more obvious, we can add some styles to the target element. The following is a simple CSS example:

.drag-element {
  width: 100px;
  height: 100px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  line-height: 100px;
  cursor: move;
}

In the above code, we set the width, height, background color and other styles for the target element, and set the mouse pointer to move, To indicate that this element can be dragged.

3. JavaScript code
Next, we need to write JavaScript code to implement the drag and drop function. The following is a simple drag and drop implementation example:

// 获取目标元素
var dragElement = document.querySelector('.drag-element');

var isActive = false;
var initialX, initialY, offsetX, offsetY;

// 鼠标按下事件
dragElement.addEventListener('mousedown', function(e) {
  isActive = true;
  initialX = e.clientX;
  initialY = e.clientY;
  offsetX = e.offsetX;
  offsetY = e.offsetY;
});

// 鼠标移动事件
document.addEventListener('mousemove', function(e) {
  if (isActive) {
    e.preventDefault();

    var currentX = e.clientX - initialX;
    var currentY = e.clientY - initialY;

    // 设置目标元素的位置
    dragElement.style.transform = 'translate(' + currentX + 'px, ' + currentY + 'px)';
  }
});

// 鼠标释放事件
document.addEventListener('mouseup', function(e) {
  isActive = false;
});

In the above code, we first obtain the target element through the querySelector method, and then record the initial position of the mouse in the mouse down event and the offset position of the element. Calculate the current position of the mouse in real time during the mouse movement event, and set the position of the target element to achieve the drag effect. Clear drag state on mouse release event.

4. Effect Test
Now, we can open the HTML file in the browser and try to drag the target element. When we hold down the left mouse button and move, the target element will move with the movement of the mouse.

Summary:
Through the above code examples, we can implement basic drag and drop functions. Of course, in actual development, we can also expand and optimize according to specific needs. I hope this article will help you understand how JavaScript implements drag-and-drop functionality!

The above is the detailed content of How to implement drag-and-drop function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!