前言
在实际的前端开发中，鼠标拖拽可能是一项经常会使用到的功能。但是，如何实现一个优雅的鼠标拖拽效果呢？相信对于许多开发者来说，这都是一件比较头疼的事情。本文就将介绍一种通过 RxJS 来实现鼠标拖拽的方法。
RxJS 简介
RxJS 是一款基于 Observable 的响应式编程库，和 Knockout、Vue.js、React 等其他前端框架与库不同，RxJS 不仅可以用于前端应用程序，还可用于 Node.js 服务器端程序的编写。
Observable 常被认为是一种异步编程模式，它是一个异步的、可观测、可取消的对象。RxJS 可以将任何数据类型转换为可观测的对象，并提供了一系列的操作符来操作这些对象。
实现鼠标拖拽的思路
基本的鼠标拖拽由以下三个事件组成：
- 鼠标按下事件
mousedown - 鼠标移动事件
mousemove - 鼠标抬起事件
mouseup
我们可以通过监听这三个事件来捕捉鼠标拖拽的操作，并通过 RxJS 来优雅地处理这些事件。
示例代码
HTML 代码：
<div class="box"></div>
CSS 代码：
.box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}TypeScript 代码：
-- -------------------- ---- -------
------ - ---------- ----------- ---------- ------ - ---- ----------------
------ - ---------- ----------- ------------ - ---- -------
------ - ---- ---------- --------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
---------- -------------------------
--
------ ----- ------------ ---------- ------- --------- -
------------ - --- ---------------
---------- - ------
------------------- ----------- ----------- --
---------- -
----- ----- - ----------------------------------------------------
----- ---------- - ---------------- -------------
----- ---------- - ------------------- -------------
----- -------- - ------------------- -----------
----- ----- - ----------------
---------------------- ----------- -- -
--------------- - -----
----- -------- - -
-- ------------------ - -----------------
-- ------------------ - ----------------
--
------ ----------------
--------------- ----------- -- -
---------------------------
-- ----------------- -
------ -
----- ----------------- - -----------
---- ----------------- - -----------
--
-
---
--------------------
--
---
--
----------------------
------------------ ----- --- -- -- -
-- ----- -- ---- -
---------------- - ---- - -----
--------------- - --- - -----
-
---
--
-
------------- -
--------------------------------
-
-分析示例代码
首先，我们需要获取一个 box 元素。在 ngOnInit 生命周期钩子函数中，我们使用 elementRef 从模板中获取到了该元素，并为 mousedown、mousemove、mouseup 事件分别创建了对应的 Observable 对象。
const boxEl = this.elementRef.nativeElement.querySelector('.box');
const mousedown$ = fromEvent(boxEl, 'mousedown');
const mousemove$ = fromEvent(document, 'mousemove');
const mouseup$ = fromEvent(document, 'mouseup');接着，我们用 mousedown$ 事件流作为起点，通过 switchMap 算子来处理之后的 mousemove$ 事件流。
-- -------------------- ---- -------
----- ----- - ----------------
---------------------- ----------- -- -
--------------- - -----
----- -------- - -
-- ------------------ - -----------------
-- ------------------ - ----------------
--
------ ----------------
--------------- ----------- -- -
---------------------------
-- ----------------- -
------ -
----- ----------------- - -----------
---- ----------------- - -----------
--
-
---
--------------------
--
---
--在 switchMap 中，我们创建了一个 drag$ 流，其中：
- 首先，我们设置
isDragging的值为true，表示开始进行拖拽操作，然后通过startEvent获取到了鼠标按下时的位置，并计算出了box元素距离窗口左上角的偏移量。这里我们需要注意，鼠标按下时的坐标是相对于整个窗口而言的，而元素的位置是相对于其父元素而言的，因此我们需要通过offsetLeft和offsetTop来计算出元素距离窗口左上角的偏移量。 - 接着，我们返回了一个
mousemove$事件流，使用map依次处理每个MouseEvent，并通过takeUntil算子设置了停止拖拽的条件，即当mouseup$事件触发时停止拖拽。在map中，我们首先使用preventDefault阻止了默认事件的执行，然后判断当前是否处于拖拽状态，如果是，则计算出box元素应该移动到的位置，返回一个对象。
最后，我们订阅了 drag$ 事件流，将 box 元素移动到它应该在的位置。
this.subscription.add(
drag$.subscribe(({ left, top }) => {
if (left && top) {
boxEl.style.left = left + 'px';
boxEl.style.top = top + 'px';
}
}),
);总结
本文介绍了如何通过 RxJS 来实现鼠标拖拽，并给出了一个完整的示例。在日常开发中，我们可以将这种方法应用到拖拽排序、图形拖拽等场景中，用于优化应用程序的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6459e25b968c7c53b0bfdb10