实现一个函数 拖拽排序

推荐答案

-- -------------------- ---- -------
-------- ------------------- -
  --- --------------- - -----

  --------------------------------------- --- -- -
    --------------- - ---------
    ---------------------- - ------
  ---

  -------------------------------------- --- -- -
    -------------------
    ----- ------------ - ------------------------------ -----------
    -- ------------- -- ----- -
      ---------------------------------------
    - ---- -
      --------------------------------------- --------------
    -
  ---

  ------------------------------------- --- -- -
    ---------------------- - ----
  ---

  -------- ------------------------------ -- -
    ----- ----------------- - -------------------------------------------------------------

    ------ ---------------------------------- ------ -- -
      ----- --- - ------------------------------
      ----- ------ - - - ------- - ---------- - --
      -- ------- - - -- ------ - --------------- -
        ------ - ------- ------- -------- ----- --
      - ---- -
        ------ --------
      -
    -- - ------- ------------------------ -----------
  -
-

-- ----
----- --------- - -------------------------------------
--------------------

本题详细解读

1. 功能描述

拖拽排序功能允许用户通过拖拽元素来重新排列列表中的项目。这个功能在前端开发中非常常见，特别是在需要用户自定义顺序的场景中，如任务管理、图片排序等。

2. 实现思路

• dragstart 事件：当用户开始拖拽一个元素时，记录当前被拖拽的元素，并设置其透明度为 0.4，以表示正在拖拽。
• dragover 事件：当拖拽的元素在容器内移动时，计算当前鼠标位置相对于其他元素的位置，找到最接近的元素，并将拖拽的元素插入到该元素之前或之后。
• dragend 事件：当拖拽结束时，恢复被拖拽元素的透明度为 1。
• getDragAfterElement 函数：用于计算当前鼠标位置相对于其他元素的位置，找到最接近的元素。

3. 代码解析

• dragstart 事件：通过 e.target 获取当前被拖拽的元素，并设置其透明度。
• dragover 事件：通过 e.preventDefault() 阻止默认行为，调用 getDragAfterElement 函数找到最接近的元素，并将拖拽的元素插入到该元素之前或之后。
• dragend 事件：恢复被拖拽元素的透明度。
• getDragAfterElement 函数：通过 getBoundingClientRect() 获取每个元素的位置信息，计算鼠标位置与元素中心的偏移量，找到最接近的元素。

4. 使用示例

• 在 HTML 中，确保容器内的每个可拖拽元素都有 draggable="true" 和 class="draggable" 属性。
• 调用 dragSort 函数，传入容器元素即可实现拖拽排序功能。

<div class="container">
  <div class="draggable" draggable="true">Item 1</div>
  <div class="draggable" draggable="true">Item 2</div>
  <div class="draggable" draggable="true">Item 3</div>
</div>