The key to implementing sortable lists lies in the HTML5 drag and drop API. The following points should be noted: 1. Set the draggable attribute to make the elements draggable and prevent the default behavior of the dragover to allow placement; 2. Listen to dragstart to record drag data, and update the DOM structure when dropping; 3. Use the dragover event to judge the insertion position in combination with coordinates to realize the sorting logic; 4. Add style optimization experience and deal with mobile compatibility issues.

The key to implementing sortable lists is the HTML5 drag and drop API. Although browser support is already quite extensive, there are still several key points to make it really easy to use.

1. Basic structure and drag attribute settings

To make an element draggable, you must first add draggable="true" attribute. For example on a <li> element:

 <ul id="sortable-list">
  <li draggable="true">Item 1</li>
  <li draggable="true">Item 2</li>
</ul>

It is not enough to drag lightly, but you have to tell the browser which elements can be used as "targets" to receive drag content. Usually we listen to the dragover event and block the default behavior so that the element can be dragged over the target area.

It should be noted that some elements (such as links and images) are draggable by default, but most ordinary elements need to manually set draggable .

2. Handle drag and drop events: dragstart and drop

The core of drag and drop is to listen for several key events:

<li> dragstart : triggered when the user starts dragging elements, which is usually used to set data and drag images.<li> dragover : continuously triggers on a placeable target. preventDefault() must be called here, otherwise drop cannot be triggered.<li> drop : Triggered when the user releases the mouse to complete the placement, here is where the DOM is updated.

For example, in dragstart we can record which element is currently dragging:

 const listItems = document.querySelectorAll('#sortable-list li');

listItems.forEach(item => {
  item.addEventListener('dragstart', (e) => {
    e.dataTransfer.setData('text/plain', item.textContent);
    item.classList.add('dragging');
  });
});

In the drop stage, we can insert elements into appropriate locations based on the acquired data.

3. Implement true "sorting" logic

Light energy is not enough. The key is to allow the user to drag to a certain position and insert the element in front or behind that position.

A common practice is to listen for dragover and find out where it should be inserted. You can use document.elementFromPoint() or compare coordinates to determine which two elements the drag element is between.

Let's give a simple implementation example:

 const list = document.getElementById('sortable-list');

list.addEventListener('dragover', (e) => {
  e.preventDefault();
  const dragging = document.querySelector('.dragging');
  const elements = [...list.querySelectorAll('li')].filter(el => el !== dragging);

  let nextElement;

  for (const el of elements) {
    const rect = el.getBoundingClientRect();
    if (e.clientY < rect.top rect.height / 2) {
      nextElement = el;
      break;
    }
  }

  if (nextElement) {
    list.insertBefore(dragging, nextElement);
  } else {
    list.appendChild(dragging);
  }
});

The general idea of ??this method is: judge which element should be inserted before based on the Y coordinate of the mouse. If you don't find the right position, put it to the end.

4. Style optimization and compatibility processing

In order to make the user experience better, it is recommended to add some style changes during the dragging process, such as translucent effects, border highlighting, etc.:

 .dragging {
  opacity: 0.5;
}

Additionally, the HTML5 drag and drop API support on mobile is not ideal, because the "drag" operation on mobile devices is usually scrolling rather than drag and drop. If you need mobile support, you may need to introduce additional libraries or use touch event simulation instead.

Basically that's it. It seems not complicated, but details are prone to errors. For example, forgetting preventDefault() or not handling the insertion order correctly will cause the function to fail.

The above is the detailed content of Creating sortable lists using the HTML5 Drag and Drop API.. For more information, please follow other related articles on the PHP Chinese website!