随着前端技术的发展和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