如何用JavaScript实现可拖拽排序列表？

// 实现可拖拽排序列表的JavaScript代码
document.addEventListener('DOMContentLoaded', function() {
    const list = document.getElementById('sortableList');
    let dragItem = null;

    list.addEventListener('dragstart', function(e) {
        dragItem = e.target;
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', e.target.innerHTML);
    });

    list.addEventListener('dragover', function(e) {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        const target = e.target;
        if (target && target !== dragItem && target.nodeName === 'LI') {
            const rect = target.getBoundingClientRect();
            const next = (e.clientY - rect.top) / (rect.bottom - rect.top) > 0.5;
            list.insertBefore(dragItem, next && target.nextSibling || target);
        }
    });

    list.addEventListener('drop', function(e) {
        e.preventDefault();
        dragItem.innerHTML = e.dataTransfer.getData('text/html');
        dragItem = null;
    });

    list.addEventListener('dragend', function(e) {
        dragItem = null;
    });
});