一个ul列表 帮我用js写一个拖动li排序

好的，以下是一个基于原生JavaScript的示例代码：

HTML代码：

<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

JavaScript代码：

// 获取可排序的ul元素
const sortable = document.getElementById('sortable');

// 获取所有li元素
const items = sortable.querySelectorAll('li');

// 定义拖拽开始时的位置
let startPosition;

// 遍历所有li元素
items.forEach(item => {
  // 添加拖拽事件监听器
  item.addEventListener('dragstart', dragStart);
  item.addEventListener('dragover', dragOver);
  item.addEventListener('drop', drop);
});

// 拖拽开始时保存当前位置
function dragStart(event) {
  startPosition = event.currentTarget;
  event.dataTransfer.effectAllowed = 'move';
  event.dataTransfer.setData('text/html', this.innerHTML);
}

// 阻止默认事件并允许拖拽
function dragOver(event) {
  event.preventDefault();
  event.dataTransfer.dropEffect = 'move';
}

// 在新位置释放拖拽元素，并重新排列li元素的顺序
function drop(event) {
  event.preventDefault();

  // 获取当前位置和目的位置的元素
  const endPosition = event.currentTarget;
  const startOrder = parseInt(startPosition.getAttribute('data-order'));
  const endOrder = parseInt(endPosition.getAttribute('data-order'));

  // 如果当前位置在目的位置之前，则在目的位置之前插入元素
  if (startOrder < endOrder) {
    endPosition.parentNode.insertBefore(startPosition, endPosition.nextSibling);
  }
  // 如果当前位置在目的位置之后，则在目的位置之后插入元素
  else {
    endPosition.parentNode.insertBefore(startPosition, endPosition);
  }

  // 重新设置li元素的顺序
  resetOrder();
}

// 重新设置li元素的顺序
function resetOrder() {
  const items = sortable.querySelectorAll('li');
  items.forEach((item, index) => {
    item.setAttribute('data-order', index);
  });
}

通过以上代码，你可以实现一个可排序的ul列表。