使用JavaScript实现一个复杂功能：自定义拖拽排序列表-阿里云开发者社区

在Web开发中，拖拽排序是一个常见的需求。它允许用户通过拖拽的方式重新排列列表项的顺序。本文将介绍如何使用原生JavaScript实现这一功能

功能描述

我们要实现的功能是：创建一个可拖拽的列表，用户可以通过鼠标拖拽列表项到任意位置，并实时显示拖拽后的排序结果。

实现步骤

HTML结构

首先，我们需要创建一个HTML结构来表示列表。每个列表项用一个<li>标签表示

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>拖拽排序列表</title>  
    <style>  
        /* 样式将在后面添加 */  
    </style>  
</head>  
<body>  
    <ul id="sortable-list">  
        <li draggable="true">Item 1</li>  
        <li draggable="true">Item 2</li>  
        <li draggable="true">Item 3</li>  
        <!-- 更多列表项... -->  
    </ul>  
  
    <script>  
        // JavaScript代码将在后面添加  
    </script>  
</body>  
</html>

CSS样式

为了增强用户体验，我们添加一些基本的CSS样式。

<style>  
    #sortable-list {  
        list-style-type: none;  
        padding: 0;  
    }  
  
    #sortable-list li {  
        margin: 10px 0;  
        padding: 10px;  
        background-color: #f4f4f4;  
        border: 1px solid #ddd;  
        cursor: move;  
    }  
</style>

JavaScript实现

下面是实现拖拽排序功能的核心JavaScript代码

<script>  
    // 获取列表元素  
    const list = document.getElementById('sortable-list');  
  
    // 为每个列表项添加事件监听器  
    list.addEventListener('dragstart', handleDragStart);  
    list.addEventListener('dragover', handleDragOver);  
    list.addEventListener('drop', handleDrop);  
  
    // 拖拽开始时触发  
    function handleDragStart(e) {  
        // 设置拖拽的数据类型和值  
        e.dataTransfer.setData('text/plain', '');  
        // 保存拖拽元素的引用  
        list.dragSrcEl = this;  
        // 为拖拽元素添加样式  
        e.target.classList.add('dragging');  
    }  
  
    // 当拖拽元素在目标元素上方时触发  
    function handleDragOver(e) {  
        if (e.preventDefault) {  
            e.preventDefault(); // 阻止默认行为，允许放置  
        }  
        return false;  
    }  
  
    // 当拖拽元素被放置到目标元素时触发  
    function handleDrop(e) {  
        if (e.stopPropagation) {  
            e.stopPropagation(); // 阻止事件冒泡  
        }  
  
        // 获取拖拽元素和目标元素  
        const dragSrcEl = list.dragSrcEl;  
        const dropHTML = e.target.innerHTML;  
  
        // 如果目标元素不是列表项，则退出  
        if (dragSrcEl !== e.target && e.target.nodeName === 'LI') {  
            // 交换拖拽元素和目标元素的位置  
            e.target.innerHTML = dragSrcEl.innerHTML;  
            dragSrcEl.innerHTML = dropHTML;  
  
            // 移除拖拽元素的样式  
            dragSrcEl.classList.remove('dragging');  
        }  
  
        return false;  
    }  
</script>

代码注释和分析

在HTML中，我们为每个<li>元素添加了draggable="true"属性，使其可拖拽。
在CSS中，我们设置了列表和列表项的样式，同时为正在拖拽的元素添加了一个dragging类（尽管在上面的代码中并未定义该类的样式，你可以根据需要添加）。
在JavaScript中，我们使用了HTML5的拖放API。通过监听dragstart、dragover和drop事件，我们能够控制拖拽的过程和结果。

handleDragStart函数在拖拽开始时被调用。它设置了拖拽的数据类型和值，并保存了拖拽元素的引用。
handleDragOver函数在拖拽元素在目标元素上方时被调用。它阻止了默认行为，允许元素被放置。
handleDrop函数在拖拽元素被放置到目标元素时被调用。它交换了拖拽元素和目标元素的位置，并移除了拖拽元素的样式。

在JavaScript中实现拖拽排序功能涉及对HTML5拖放API的使用，以及对鼠标事件和DOM操作的精细控制。以下是实现拖拽排序的具体操作步骤：

初始化拖拽：

为每个需要拖拽的列表项（<li>元素）设置draggable="true"属性，这允许它们被拖动。
为列表（<ul>或<ol>元素）添加事件监听器，监听dragstart、dragover和drop事件。这些事件分别在拖拽开始、拖拽元素在目标上方移动以及拖拽元素被放置时触发。

处理拖拽开始（dragstart）：

当用户开始拖拽一个列表项时，dragstart事件被触发。
在事件处理程序中，可以使用event.target来获取被拖拽的元素。
通常，在这个阶段需要设置一些数据到dataTransfer对象上，以便在后续的drop事件中使用。但在拖拽排序的场景中，由于我们只需要知道哪个元素被拖动，因此可以设置一些标识信息或者简单地不设置数据，而是通过其他方式（如全局变量或元素属性）来跟踪拖拽的元素。

处理拖拽过程（dragover）：

当被拖拽的元素移动到另一个列表项上方时，会不断触发dragover事件。
默认情况下，浏览器不允许放置（drop）操作，因此需要阻止这个事件的默认行为。这可以通过调用event.preventDefault()方法来实现。
此外，在这个阶段可以更新界面以提供视觉反馈，比如改变目标列表项的背景色或样式，以指示它可以接受放置。

处理拖拽放置（drop）：

当用户释放鼠标按钮，且被拖拽的元素位于一个有效的放置目标上方时，drop事件被触发。
在drop事件处理程序中，首先需要获取拖拽源元素（可以从之前设置的dataTransfer对象中获取，或者通过其他跟踪机制）。
接着，获取放置目标元素，这通常是触发drop事件的元素。
然后，需要更新DOM来反映新的排序。这通常涉及改变元素的位置，可以通过直接操作DOM（比如交换元素的innerHTML）或使用更高级的DOM操作方法（如insertBefore或appendChild）来实现。
最后，可能需要提供一些额外的反馈，比如通过动画来平滑地展示元素位置的改变。

清理和重置：

在拖拽操作完成后，需要重置任何临时状态或样式更改，以确保界面的一致性。
如果在拖拽过程中添加了额外的样式或类来提供视觉反馈，现在需要移除它们。

在实现这些操作时，需要注意浏览器的兼容性问题，因为不同的浏览器可能在处理拖放事件时存在细微的差异。此外，为了提高用户体验，可以添加一些额外的功能，比如触摸设备支持、拖拽手柄、占位符显示等。

另外一种实现方式：

HTML结构

首先，我们创建一个包含可拖拽列表项的<ul>元素。

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>自定义拖拽排序列表</title>  
<style>  
  /* 样式将在后面添加 */  
</style>  
</head>  
<body>  
  
<ul id="sortable-list">  
  <li draggable="true">列表项 1</li>  
  <li draggable="true">列表项 2</li>  
  <li draggable="true">列表项 3</li>  
  <li draggable="true">列表项 4</li>  
  <li draggable="true">列表项 5</li>  
</ul>  
  
<script>  
  // JavaScript代码将在后面添加  
</script>  
  
</body>  
</html>

CSS样式

然后，我们添加一些CSS样式来美化列表和拖拽时的视觉效果。

<style>  
#sortable-list {  
  list-style-type: none;  
  padding: 0;  
}  
  
#sortable-list li {  
  margin: 0.5em 0;  
  padding: 0.5em 1em;  
  background-color: #f4f4f4;  
  border: 1px solid #ddd;  
  cursor: move;  
  position: relative; /* 为了定位占位符 */  
}  
  
/* 拖拽时的占位符样式 */  
#sortable-list li.placeholder {  
  background-color: transparent;  
  border: 1px dashed #666;  
  margin: 0.5em 0;  
  padding: 0;  
  height: 2em; /* 根据需要调整占位符高度 */  
  display: none; /* 初始时隐藏占位符 */  
}  
  
/* 拖拽时的列表项样式 */  
#sortable-list li.dragging {  
  opacity: 0.5;  
}  
</style>

JavaScript实现

最后，我们编写JavaScript代码来实现拖拽排序的功能

<script>  
// 获取列表元素  
const list = document.getElementById('sortable-list');  
  
// 初始化占位符  
const placeholder = document.createElement('li');  
placeholder.classList.add('placeholder');  
  
// 为列表添加事件监听器  
list.addEventListener('dragstart', handleDragStart);  
list.addEventListener('dragover', handleDragOver);  
list.addEventListener('drop', handleDrop);  
  
// 拖拽开始时  
function handleDragStart(e) {  
  this.style.opacity = '0.4'; // 拖拽时的透明度  
  
  // 存储拖拽元素的引用和数据  
  dragSrcEl = this;  
  e.dataTransfer.effectAllowed = 'move';  
  e.dataTransfer.setData('text/html', this.innerHTML);  
}  
  
// 拖拽在目标上方时  
function handleDragOver(e) {  
  if (e.preventDefault) {  
    e.preventDefault(); // 阻止默认行为以允许放置  
  }  
  this.classList.add('over');  
  // 创建一个占位符并添加到目标位置  
  const targetEl = e.target;  
  const rect = targetEl.getBoundingClientRect();  
  const offset = rect.y + (rect.height / 2);  
  const mouseY = e.clientY;  
  
  if (mouseY < offset) {  
    // 鼠标在元素上半部分，将占位符插入到目标元素之前  
    list.insertBefore(placeholder, targetEl);  
  } else {  
    // 鼠标在元素下半部分，将占位符插入到目标元素之后  
    let nextEl = targetEl.nextElementSibling;  
    if (!nextEl) {  
      // 如果没有下一个元素，则将占位符添加到列表末尾  
      nextEl = placeholder;  
      list.appendChild(nextEl);  
    } else {  
      list.insertBefore(placeholder, nextEl);  
    }  
  }  
  
  // 显示占位符  
  placeholder.style.display = 'block';  
  
  // 清理  
  const dragSrcEl = document.querySelector('.dragging');  
  const dragPlaceholder = document.querySelector('.placeholder');  
  if (dragSrcEl && dragPlaceholder && dragSrcEl !== targetEl) {  
    dragPlaceholder.style.width = `${dragSrcEl.offsetWidth}px`;  
    dragPlaceholder.style.height = `${dragSrcEl.offsetHeight}px`;  
  }  
  
  // 移除over类  
  this.classList.remove('over');  
  
  return false;  
}  
  
// 元素放置时  
function handleDrop(e) {  
  if (e.stopPropagation) {  
    e.stopPropagation(); // 阻止事件冒泡  
  }  
  
  if (e.preventDefault) {  
    e.preventDefault(); // 阻止默认行为  
  }  
  
  // 获取拖拽源元素和目标元素  
  const srcEl = document.querySelector('.dragging');  
  const targetEl = e.target;  
  
  // 如果拖拽的不是列表项或放置在非列表项上，则退出  
  if (!(srcEl && targetEl && srcEl.tagName === 'LI' && targetEl.tagName === 'LI')) {  
    return;  
  }  
  
  // 用源元素的HTML替换占位符  
  placeholder.innerHTML = e.dataTransfer.getData('text/html');  
  
  // 如果占位符不在目标元素之前，将其移动到目标元素之后  
  if (placeholder !== targetEl.previousElementSibling) {  
    list.insertBefore(srcEl, targetEl.nextElementSibling);  
  } else {  
    list.insertBefore(srcEl, targetEl);  
  }  
  
  // 清理  
  srcEl.style.opacity = '1';  
  srcEl.classList.remove('dragging');  
  placeholder.style.display = 'none';  
  
  return false;  
}  
  
// 为列表项添加可拖拽属性并绑定事件  
const listItems = list.querySelectorAll('li');  
listItems.forEach(function(item) {  
  item.draggable = true;  
  item.addEventListener('dragstart', handleDragStart);  
  item.addEventListener('dragover', handleDragOver);  
});  
  
// 注意：由于事件监听器是在每个列表项上单独设置的，因此`this`在事件处理程序中将引用正确的元素。  
// 如果使用事件代理，则需要通过`event.target`来获取当前操作的元素。  
</script>

代码解释和分析

HTML: 创建了一个包含五个列表项的<ul>元素。
CSS: 定义了列表、列表项和拖拽时的样式。包括一个占位符样式，用于在拖拽时显示将要放置的位置。
JavaScript:

handleDragStart: 当拖拽开始时，存储拖拽源元素的引用，并设置透明度以提供视觉反馈。
handleDragOver: 当拖拽元素在目标上方移动时，阻止默认行为，并创建一个占位符来显示将要放置的位置。根据鼠标位置决定占位符应该放在目标元素之前还是之后。
handleDrop: 当元素被放置时，用源元素的HTML替换占位符，并重新排列DOM元素以反映新的顺序。

注意：这个实现有几个需要注意的地方：

占位符的显示和隐藏是通过直接修改其display属性来实现的。
拖拽源元素在dragstart事件中存储，并在drop事件中使用。
为了简化示例，这里没有处理一些边缘情况，比如拖拽到列表外部或同时拖拽多个元素。
代码中使用了querySelector和querySelectorAll来选择元素，这要求浏览器支持这些现代DOM方法。

当然，我们可以为这个拖拽排序列表添加更多的自定义功能。

以下是一些建议的扩展功能：

动画效果：为拖拽和放置操作添加平滑的动画效果。
触摸支持：确保在触摸设备上也能正常工作。
拖拽手柄：仅为列表项的一部分（如一个小图标或文本）添加拖拽功能，而不是整个列表项。
限制拖拽范围：防止元素被拖拽到列表外部。
拖拽结束时的回调：当拖拽操作完成时，触发一个自定义的回调函数。
拖拽占位符定制：允许通过CSS类或JavaScript自定义占位符的样式。
禁用特定元素的拖拽：为某些列表项禁用拖拽功能。

实施这些自定义功能

以下是如何实施其中一些功能的代码示例：

1. 动画效果

我们可以使用CSS过渡来为元素添加动画效果。例如，当元素被放置时，我们可以平滑地改变其位置。

#sortable-list li {  
  transition: transform 0.3s ease; /* 添加过渡效果 */  
}

然后在JavaScript中，而不是直接移动元素，我们可以通过改变其transform属性来移动它。

2. 触摸支持

为了支持触摸设备，我们需要监听触摸事件而不是鼠标事件。我们可以使用touchstart, touchmove, 和 touchend事件。

list.addEventListener('touchstart', handleDragStart);  
list.addEventListener('touchmove', handleDragOver);  
list.addEventListener('touchend', handleDrop);

请注意，触摸事件的处理方式与鼠标事件略有不同，特别是关于如何获取触摸点的位置。

3. 拖拽手柄

我们可以在每个列表项内部添加一个小的手柄元素，并仅对该手柄设置draggable属性。

<ul id="sortable-list">  
  <li><span class="handle">☰</span> 列表项 1</li>  
  <li><span class="handle">☰</span> 列表项 2</li>  
  <!-- ... -->  
</ul>

然后，我们只为手柄元素添加事件监听器。

const handles = list.querySelectorAll('.handle');  
handles.forEach(function(handle) {  
  handle.draggable = true;  
  handle.addEventListener('dragstart', handleDragStart);  
  // ... 其他事件  
});

在handleDragStart函数中，我们需要调整拖拽元素的引用，使其指向包含手柄的列表项，而不是手柄本身。

4. 限制拖拽范围

我们可以在handleDragOver函数中检查拖拽元素是否在列表边界内，并据此决定是否允许放置。

function handleDragOver(e) {  
  // ... 其他代码  
  
  // 检查是否拖拽到列表外部  
  const rect = list.getBoundingClientRect();  
  if (e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom) {  
    // 如果在外部，则阻止放置  
    if (e.preventDefault) e.preventDefault();  
    return false;  
  }  
  
  // ... 其他代码  
}

5. 拖拽结束时的回调

我们可以定义一个回调函数，并在handleDrop函数的末尾调用它。

function onDragEndCallback(srcEl, targetEl) {  
  // 在这里执行拖拽结束后的自定义操作  
  console.log('拖拽结束，源元素：', srcEl, '目标元素：', targetEl);  
}  
  
function handleDrop(e) {  
  // ... 其他代码  
  
  // 调用回调函数  
  onDragEndCallback(srcEl, targetEl);  
}

6. 拖拽占位符定制

我们已经为占位符定义了一些基本的CSS样式，但可以通过添加更多的类或直接在JavaScript中修改样式属性来进一步定制它。

占位符的定制可以通过CSS和JavaScript两种方式来实现。以下是一些具体的方法：

通过CSS定制占位符

添加CSS类：在HTML中为占位符元素添加一个特定的类，然后为这个类编写CSS样式。

<!-- 假设你的占位符元素是这样的 -->  
<li class="placeholder"></li>

/* 在CSS中为这个类添加样式 */  
.placeholder {  
    background-color: #f0f0f0;  
    border: 1px dashed #ccc;  
    /* 其他样式属性 */  
}

使用伪元素：如果你的占位符是通过其他元素的状态来表示的（例如，在拖拽时给一个元素添加`.dragging-above`或`.dragging-below`类），你可以使用伪元素`::before`或`::after`来创建占位符的视觉效果。

.list-item.dragging-above::before,  
.list-item.dragging-below::after {  
    content: '';  
    display: block;  
    height: 20px; /* 占位符的高度 */  
    background-color: #f0f0f0;  
    /* 其他样式属性 */  
}

通过JavaScript定制占位符

动态修改样式属性：在拖拽事件的处理函数中，你可以直接修改占位符元素的样式属性

function handleDragOver(e) {  
    // ... 确定占位符的位置  
    // 修改占位符的样式  
    placeholder.style.backgroundColor = '#f0f0f0';  
    placeholder.style.border = '1px dashed #ccc';  
    // 其他样式属性  
}

2.切换CSS类：与直接修改样式属性类似，你可以在JavaScript中通过切换CSS类来改变占位符的样式

function handleDragOver(e) {  
    // ... 确定占位符的位置  
    // 切换占位符的CSS类  
    placeholder.classList.add('dragging');  
    // 或者  
    placeholder.classList.remove('default');  
    placeholder.classList.add('custom');  
}  
function handleDrop(e) {  
    // ... 拖拽结束后的处理  
    // 恢复占位符的默认样式  
    placeholder.classList.remove('dragging');  
    // 或者  
    placeholder.classList.remove('custom');  
    placeholder.classList.add('default');  
}

7. 禁用特定元素的拖拽

我们可以为不想拖拽的列表项添加一个特定的类，并在设置事件监听器时检查这个类。

<ul id="sortable-list">  
  <li draggable="true">列表项 1</li>  
  <li draggable="true" class="no-drag">列表项 2</li> <!-- 禁用拖拽 -->  
  <!-- ... -->  
</ul>

listItems.forEach(function(item) {  
  if (!item.classList.contains('no-drag')) {  
    item.draggable = true;  
    item.addEventListener('dragstart', handleDragStart);  
    // ... 其他事件  
  }  
});

总结

通过原生JavaScript和HTML5的拖放API，我们实现了一个自定义的拖拽排序列表。这个功能增强了用户界面的交互性，提供了更好的用户体验。在实际项目中，你还可以根据需要对这个功能进行扩展和优化，比如添加动画效果、处理触摸事件等。

使用JavaScript实现一个复杂功能：自定义拖拽排序列表

功能描述

实现步骤

HTML结构

CSS样式

JavaScript实现

代码注释和分析

另外一种实现方式：

HTML结构

CSS样式

JavaScript实现

代码解释和分析

以下是一些建议的扩展功能：

实施这些自定义功能

1. 动画效果

2. 触摸支持

3. 拖拽手柄

4. 限制拖拽范围

5. 拖拽结束时的回调

6. 拖拽占位符定制

通过CSS定制占位符

使用伪元素：如果你的占位符是通过其他元素的状态来表示的（例如，在拖拽时给一个元素添加`.dragging-above`或`.dragging-below`类），你可以使用伪元素`::before`或`::after`来创建占位符的视觉效果。

通过JavaScript定制占位符

7. 禁用特定元素的拖拽

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

使用JavaScript实现一个复杂功能：自定义拖拽排序列表

功能描述

实现步骤

HTML结构

CSS样式

JavaScript实现

代码注释和分析

另外一种实现方式：

HTML结构

CSS样式

JavaScript实现

代码解释和分析

以下是一些建议的扩展功能：

实施这些自定义功能

1. 动画效果

2. 触摸支持

3. 拖拽手柄

4. 限制拖拽范围

5. 拖拽结束时的回调

6. 拖拽占位符定制

通过CSS定制占位符

使用伪元素：如果你的占位符是通过其他元素的状态来表示的（例如，在拖拽时给一个元素添加.dragging-above或.dragging-below类），你可以使用伪元素::before或::after来创建占位符的视觉效果。

通过JavaScript定制占位符

7. 禁用特定元素的拖拽

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景

使用伪元素：如果你的占位符是通过其他元素的状态来表示的（例如，在拖拽时给一个元素添加`.dragging-above`或`.dragging-below`类），你可以使用伪元素`::before`或`::after`来创建占位符的视觉效果。