Rx.js实现拖拽效果

最新推荐文章于 2021-03-29 10:22:58 发布

weixin_33754065

最新推荐文章于 2021-03-29 10:22:58 发布

阅读量80

点赞数

原文链接：https://juejin.im/post/5b2db08af265da59bb0cd13a

版权

周五用裸react写了波一个选择物品弹框拖拽的需求，不是很爽，所以周末用Rx又撸了一个，下面是功能完备的demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #dragBox {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 200px;
            height: 200px;
            background: red;
            cursor: move;
        }
    </style>
</head>
<body>
    <div draggable="true" id="dragBox">可被拖拽的Box</div>
    <script src="./main.js"></script>
</body>
</html>
复制代码

import { fromEvent } from 'rxjs';
import { map, tap, switchMap } from 'rxjs/operators';

document.getElementsByTagName('body')[0].addEventListener('dragenter', e => e.preventDefault())
document.getElementsByTagName('body')[0].addEventListener('dragover', e => e.preventDefault())

const $dragBox = document.getElementById('dragBox');
const DRAP_BOX_OFFSET = {
    x: $dragBox.clientWidth / 2,
    y: $dragBox.clientHeight / 2,
}

const generateDragStream = (type) => {
    return fromEvent($dragBox, type);
}

const dragStart$ = generateDragStream('dragstart').pipe(
    tap(e => {
        e.dataTransfer.setDragImage(document.createElement('div'), 0, 0)
    })
)

const dragMove$ = generateDragStream('drag').pipe(
    map(e => {
        return {
            clientX: e.clientX - DRAP_BOX_OFFSET.x,
            clientY: e.clientY - DRAP_BOX_OFFSET.y
        }
    })
)

dragStart$.pipe(
    switchMap(() => dragMove$)
).subscribe(v => {
    $dragBox.style.top = `${v.clientY}px`;
    $dragBox.style.left = `${v.clientX}px`;
});

复制代码

效果：

要是想一起愉快的写Rx，来我们团队吧QAQ，简历发我邮箱chonger@qunhemail.com，帮你内推?

转载于:https://juejin.im/post/5b2db08af265da59bb0cd13a

weixin_33754065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Rx.js实现拖拽效果

周五用裸react写了波一个选择物品弹框拖拽的需求，不是很爽，所以周末用Rx又撸了一个，下面是功能完备的demo：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-...
复制链接

扫一扫