前端开发中，拖拽效果是常见的交互设计需求之一。LESS 是一种 CSS 预处理器，可以对 CSS 进行扩展和封装，方便我们实现复杂的样式效果。在本文中，我们将通过 LESS mixin 实现一个基于原生 JavaScript 的拖拽效果。
实现思路
拖拽效果可以分为三个阶段：
- 按下鼠标左键，开始拖拽
- 移动鼠标，拖拽元素跟随鼠标移动
- 松开鼠标左键，停止拖拽
我们需要通过监听鼠标事件并改变元素的 CSS 样式来实现上述阶段。
对于每个阶段，我们都可以创建一个对应的 LESS mixin，并在拖拽元素的样式中引用这些 mixin，从而实现拖拽效果的封装和复用。
LESS mixin 实现拖拽效果
开始拖拽
开始拖拽需要监听 mousedown 事件，并设置元素的 position 属性为 absolute。以下是对应的 LESS mixin：
.draggable {
position: relative; // 首先将其位置设置为 relative
&.dragging {
position: absolute; // 开始拖拽时，将其位置设置为 absolute
z-index: 999;
cursor: move;
}
}在模板中引用该 mixin 如下：
<div class="draggable"></div>
并在 JavaScript 中添加事件监听器：
var el = document.querySelector('.draggable');
el.addEventListener('mousedown', function (e) {
el.classList.add('dragging');
// TODO: 记录当前鼠标位置，以及元素当前位置
});拖拽移动
拖拽移动需要监听 mousemove 事件，并计算出元素需要移动的距离。以下是对应的 LESS mixin：
-- -------------------- ---- -------
---------- -
--------- ---------
---------- -
--------- ---------
-------- ----
------- -----
---- -------------
----- --------------
-
-
--------------------- --- -
------------- -------
-------------- -------
-其中， draggingPosition() 是一个接受两个参数（x,y）的 mixin，用于设置被拖拽元素的位置。这个 mixin 会被引用在 mousemove 事件中，由 JavaScript 更新其参数。
-- -------------------- ---- -------
--- -- - -------------------------------------
-------------------------------- -------- --- -
-----------------------------
--- ------ - ----------
--- ------ - ----------
--- ------- - --
--- ------- - --
-------- -------------- -
------- - --------- - -------
------- - --------- - -------
------------- - ------- - -----
------------ - ------- - -----
-
-------- ------------ -
----------------------------------------- -------------
--------------------------------------- -----------
--------------------------------
-
-------------------------------------- -------------
------------------------------------ -----------
---停止拖拽
停止拖拽需要监听 mouseup 事件，并清除 mousemove 和 mouseup 事件的监听。这个过程已经在上一步做完了。
示例代码
以下是完整示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------
-------
---------- -
------ ------
------- ------
----------------- -----
--------- ---------
---------- -
--------- ---------
-------- ----
------- -----
-
-
--------
-------
------
---- ------------------------
--------
--- -- - -------------------------------------
-------------------------------- -------- --- -
-----------------------------
--- ------ - ----------
--- ------ - ----------
--- ------- - --
--- ------- - --
-------- -------------- -
------- - --------- - -------
------- - --------- - -------
------------- - ------- - -----
------------ - ------- - -----
-
-------- ------------ -
----------------------------------------- -------------
--------------------------------------- -----------
--------------------------------
-
-------------------------------------- -------------
------------------------------------ -----------
---
---------
-------
-------总结
本文介绍了如何使用 LESS mixin 实现拖拽效果。通过对拖拽过程的分解和样式的封装，我们实现了一个清晰、可重用的拖拽效果。此外，使用 LESS 还可以更方便地管理样式表，使样式的管理更加可靠和高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645d92b7968c7c53b0ffebc4