Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to achieve drag-and-drop function in Angular+rxjs". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve drag-and-drop function in Angular+rxjs" can help you solve the problem.

The video tag on the page, when the scroll height exceeds its position, sets it to drag freely in the visual area.

A good Idea can be easily implemented if you use Angular's @ angular/cdk/drag-drop, but we don't use tools here.

All right, let's analyze the way to achieve it:

The scrolling height of the page is greater than the location of the video: then the bottom value of the video is less than 0 relative to the visual window. We need to set a div that wraps the video tag to facilitate calculation, and its height is the height of the original video. That is, the element is separated from the original document layout.

The video element can be dragged, so its positioning needs to be changed to fixed

If the video element is dragged freely in the visual area, then its top and left values need to be limited.

So we set the following demo layout:

Your browser does not support.

There are the following predetermined styles:

Html, body {height: 6000px; background-color: # fff;} # anchor {height: 360px; width: 100%; background-color: # F0F0F0;} .video {width: 640px; height: 360px; margin: 0 auto; background-color: black; & .video-fixed {position: fixed; top: 10px; left: 10px; width: 320px; height: 150px; cursor: all-scroll; .masker {none: } &: hover {.masker {display: block; position: absolute; width: 100%; height: 100%; background-color: rgba (0,0,0,0.8); z-index: 2;}

Rxjs is also introduced here to operate.

Elements deviate from the original document layout

I just analyzed the critical adjustment of the video element out of the document:

The outer div of the video, that is, the bottom of the relative view of the # anchor element

< 0。所以我们有： @ViewChild('anchor', { static: false })public anchor!: ElementRef;@ViewChild('video', { static: false })public video!: ElementRef;public scroll!: any;ngAfterViewInit(): void { this.scroll = fromEvent(document, 'scroll'); this.scrollFn();}// 页面滚动public scrollFn() { this.scroll .pipe( debounceTime(50), // 防抖 map(() =>

This.anchor.nativeElement.getBoundindClientRect () bottom

< 0) ) .subscribe((flag: boolean) =>

{/ / add and remove styles if (flag) {this.video.nativeElement.classList.add ('video-fixed');} else {this.video.nativeElement.classList.remove (' video-fixed');}})}

First get the anchor element object, listen to the page object document scrolling (we have added anti-shake function optimization here), when bottom

< 0 的时候，将相关的样式 video-fixed 添加给 video 。 元素拖拽 接下来就是实现 video 元素的拖拽。这里我们要监听 video 元素的三个事件，分别是鼠标按下 mousedown，鼠标移动 mousemove 和鼠标抬起 mouseup。 // demo.component.tspublic mouseDown!: any;public mouseUp!: any;public mouseMove!: any;ngAfterViewInit(): void { this.mouseDown = fromEvent(this.video.nativeElement, 'mousedown'); // 目标元素按下，即 video this.mouseMove = fromEvent(document, 'mousemove'); // 元素在文档内移动 this.mouseUp = fromEvent(document, 'mouseup'); // 鼠标抬起 this.moveFn()}// 目标元素移动public moveFn() { this.mouseDown .pipe( filter(() =>

This.video.nativeElement.classList.contains ('video-fixed')), map (() = > this.mouseMove.pipe (throttleTime (50), / / throttle takeUntil (this.mouseUp)), / / concatAll sequentially accepts each data stream thrown upstream as its data. If the previous data stream cannot be synchronized, it will temporarily store the subsequent data stream. After the current data stream is completed, it will subscribe to the latter temporary data stream concatAll (), withLatestFrom (this.mouseDown, (move:any, down:any) = > {return {x: this.validValue (move.clientX-down.offsetX, window.innerWidth-this.video.nativeElement.offsetWidth, 0), y: this.validValue (move.clientY-down.offsetY, window.innerHeight-this.video.nativeElement.offsetHeight) 0)}}) .subscribe ((position: {x: number, y: number}) = > {this.video.nativeElement.style.top = position.y + 'px' This.video.nativeElement.style.left = position.x + 'px';})} / / check boundary value public validValue = (value:number, max:number, min: number) = > {return Math.min (Math.max (value, min), max)}

We are listening for the target element (the filter function) to be pressed by the mouse, and then the mouse can move within the document range (optimized here with the throttle function) until the mouse is up. As you move, the distance between the left and top of the relative visual window of the target element is calculated, and values are assigned to left and top.

The calculation here move.clientX-down.offsetX, window.innerWidth-this.video.nativeElement.offsetWidth, the related concepts may not be very clear to you, but it does not matter, the above content, just understand the train of thought.

That's all for "how Angular+rxjs implements drag-and-drop functionality". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.