LESS 中通过结合 H5 特性实现拖拽排序

阅读时长 4 分钟读完

随着前端技术的发展和H5的出现,各种拖拽交互效果逐渐在网站中出现。而拖拽排序则是该类效果中的一种。在传统的JavaScript实现方式下,需要编写大量的代码实现拖拽、排序等功能,操作繁琐且效率低下。而LESS结合H5的新特性,可以极大的简化实现步骤,让我们来看看具体实现方法。

H5的拖拽特性

HTML5中提供了多种拖拽相关的新特性:Draggable、DataTransfer、ondragstart、ondragenter、ondragover、ondrop 和 ondragend。

  • Draggable属性:HTML5中给所有元素添加了draggable属性,设置为true就可以将其设置可拖拽。
  • ondragstart事件:当某元素被拖拽时触发该事件。
  • ondragover事件:当拖拽元素停留在目标元素上时触发该事件。
  • ondragenter事件:当拖拽元素进入目标元素时触发该事件。
  • ondrop事件:当拖拽元素在目标元素上释放时触发该事件。
  • ondragend事件:当拖拽操作完成时、拖拽元素离开目标元素时触发该事件。

LESS实现拖拽排序

H5的拖拽特性提供了便利的基础操作,在此基础上,我们可以使用LESS来实现具体的拖拽排序交互效果。下面是具体的示例代码:

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

在拖拽元素中,我们需要增加data-dragging属性,用于标志当前元素是否正在拖拽中。在添加该元素后,我们需要通过JavaScript来实现具体的拖拽操作:

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

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

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

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

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

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

在以上代码中,我们通过dragstart和dragend两个事件来完成拖拽排序。具体来说,dragstart事件中需要完成的操作包括:将被拖拽元素保存为当前元素、设置拖拽效果、设置拖拽数据以及获取当前鼠标位置等。dragend事件中则需要撤销拖拽状态并更新拖拽后的元素位置。

最后,通过LESS的样式,对拖拽元素进行样式设置,使得我们的拖拽排序交互效果更加美观实用。

总结

通过LESS和H5特性的结合,我们可以轻松实现拖拽排序交互效果,大大提高了前端代码的质量和效率。通过以上的实现案例,我们可以更加深入地理解和应用这些新技术,将其应用于实际项目开发中。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/647d856a968c7c53b084f01d

纠错
反馈