JavaScript를 사용하여 이미지 드래그 앤 드롭 정렬을 구현하는 방법은 무엇입니까?

<div id="container">
  <img src="image1.jpg" draggable="true">
  <img src="image2.jpg" draggable="true">
  <img src="image3.jpg" draggable="true">
  <!-- 其他图片... -->
</div>

document.addEventListener('DOMContentLoaded', function() {
  var container = document.getElementById('container');
  var imgs = container.getElementsByTagName('img');
  
  for (var i = 0; i < imgs.length; i++) {
    var img = imgs[i];
    
    img.addEventListener('dragstart', dragstartHandler);
    img.addEventListener('dragover', dragoverHandler);
    img.addEventListener('drop', dropHandler);
  }
});

function dragstartHandler(event) {
  var img = event.target;
  
  // 设置被拖拽的数据（图片的索引值）
  event.dataTransfer.setData('text/plain', img.dataset.index);
}

function dragoverHandler(event) {
  event.preventDefault(); // 阻止默认行为（如禁止拖拽进入）
  event.dataTransfer.dropEffect = 'move'; // 设置拖拽效果为“移动”
}

function dropHandler(event) {
  event.preventDefault(); // 阻止默认行为（如禁止拖拽进入）
  
  var container = document.getElementById('container');
  var imgs = container.getElementsByTagName('img');
  
  var srcIndex = event.dataTransfer.getData('text/plain'); // 拖拽图片的索引值
  var dstIndex = event.target.dataset.index; // 目标位置的索引值
  
  if (srcIndex !== dstIndex) {
    var srcImg = imgs[srcIndex];
    var dstImg = imgs[dstIndex];
    
    // 交换两个图片的位置
    container.insertBefore(srcImg, dstImg);
  }
}