angular 拖拽,angular可视化拖拽
角度rxjs怎么实现拖拽功能？下面本篇文章给大家介绍一下有角的结合rxjs实现拖拽的方法，希望对大家有所帮助！
在之前的文章，我们学习了有角的中自定义录像操作，没有度过的读者可先了解。
现在有这么一个需求，你会怎么实现呢？
页面中 video 标签，当滚动高度超过其位置之后，将其设置为可在可视区域自由拖拽。
一个不错的想法，如果你使用有角的的@角度/CDK/落差可以轻松实现，但是我们这里不使用工具。【相关教程推荐： 《angular教程》 】
好吧，我们来分析下实现的思路：
页面滚动高度大于视频所在的位置：那么就是视频的底部值相对可视窗口的值要小于0,我们需要设定一个包裹录像标签的差异方便计算，其高度是原设定录像的高度。即元素脱离原文档布局录像元素可以拖拽，那么其定位需要被改变为固定视频元素在可视区内自由拖动，那么需要对其顶部，左侧值进行限定所以我们设定下面的演示布局：
div id=锚 #锚
div class= video id= video #视频
div class=masker/div
视频宽度=100% 高度=100% 控件海报=assets/poster.png
源src=./资产/演示。 MP4 type= video/MP4 /
您的浏览器不支持。
/视频
/div
/div有下面这些预定的样式：
！-样式。scss -
！-这部分需要放在全局样式中-
html，正文{
高度：6000像素
背景色：# fff
}!-演示组件-scss-
#锚{
高度：360像素
宽度：100%;
背景色：# F0F0F0
}。视频{
宽度：640像素
高度：360像素
边距：0自动；
背景色：黑色；
！-视频已修复布局的样式，默认布局中是没有的-。视频-固定{
位置：固定；
top:10px；
左：10px
宽度：320像素
高度：150像素
光标：全滚动；面具人
显示：无；
}
：悬停{。面具人
显示：块；
位置：绝对；
宽度：100%;
身高：100%;
背景色：rgba(0，0，0，0.8)；
z指数：2;
}
}
}
}这里还引入了rxjs来操作。
元素脱离原文档布局
刚才已经分析了录像元素脱离文档的临界调节了：
video的外div，即#锚元素的相对视图的底部0 .所以我们有：
@ViewChild(anchor ，{ static: false })
公众主播！ElementRef
@ViewChild(video ，{ static: false })
公开视频！ElementRef
公共卷轴！任何；
ngafterviewit():void {
this.scroll=fromEvent(document， scroll )；
这个。滚动fn()；
}
//页面滚动
公共scrollFn() {
这。卷轴。管道（
去抖时间(50),//防抖
地图(()=这个。锚。原生元素。getboundindclientrect().底部0)
)。subscribe((flag: boolean)={
//添加和移除样式
如果（标志){
这个。视频。原生元素。班级名单。添加(视频-固定)；
}否则{
这个。视频。原生元素。班级名单。移除(“视频-固定”)；
}
})
}
先获取锚元素对象，监听页面对象文件滚动（我们这里加入了防抖函数优化),当底部0的时候，将相关的样式视频-固定添加给视频。
元素拖拽
接下来就是实现录像元素的拖拽。这里我们要监听录像元素的三个事件，分别是鼠标按下鼠标按下，鼠标移动鼠标移动和鼠标抬起鼠标抬起。
//demo.component.ts
公共鼠标按下！任何；
公共鼠标！任何；
公共鼠标移动！任何；
ngafterviewit():void {
这个。mousedown=from event(this。视频。本机元素，“mousedown”)；//目标元素按下，即录像
这个。mousemove=from event(文档， mousemove )；//元素在文档内移动
这个。mouseup=from event(文档， mouseup )；//鼠标抬起
this.moveFn()
}
//目标元素移动
公共移动Fn() {
this.mouseDown。管道（
过滤器(()=这个。视频。原生元素。班级名单。包含(视频-固定)，
map(()=this.mouseMove.pipe(
ThrottleTime(50)，//节流
takeUntil(this.mouseUp)
)),
//concatAll按顺序接受从上游抛出的每个数据流作为其数据。如果前一个数据流不能同步完成，它会临时存储后续数据流，只有当前数据流完成后，它才会订阅最后一个临时存储的数据流。
concatAll()，
withLatestFrom(this.mouseDown，(move:any，down:any)={
返回{
x:this . valid value(move . clientx-down . offsetx，window . inner width-this . video . native element . offsetwidth，0)，
y:this . valid value(move . clienty-down . offsety，window . inner height-this . video . native element . offset height，0)
}
})
)。订阅((职位：{
x:数字，
y:数字
})={
this . video . native element . style . top=position . y px ；
this . video . native element . style . left=position . x px ；
})
}
//检查边界值
public validValue=(value:number，max:number，min: number)={
返回Math.min(Math.max(value，min)，max)
}我们监测到目标元素(过滤函数)被鼠标按下，然后鼠标可以在document范围内移动(这里是节流函数优化)，直到鼠标抬起。在移动的过程中，计算目标元素的可见窗口的左侧和顶部之间的距离，并将值赋给left和top。
这里的计算是move.clientx-down.offsetx，window . inner width-this . video . native element . offsetwidth相关概念你可能不是很清楚，但没关系。了解以上内容即可。相关知识点会在后面的文章中介绍。
最后，我们得到以下结果。
[结束]
有关编程的更多信息，请访问：编程视频！Angular rxjs就是这么实现拖拽功能的。更多详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。