Also in the realization of similar to QQ video call as the video window drag and distress? The Gospel is here to solve such troubles for you today.

Premise:

Basic Audio and Video implementation with AnyRTC (NVUE page)

Requirements:

When two people talk, they can drag the small video freely

Implementation principle:

Uniapp nvUE built-in native plug-in BindingX. For details, see uniApp native plug-in introduction and BindingX

Effect display:

Project Address:

Call_uniapp

Concrete implementation:

1. Wrap a layer around the video container provided by the audio and video plug-in.

For example :(use anyRTC audio and video plug-in)

	<view ref="move" @touchstart="drag_start">
		<AR-CanvasView ref="location" style="flex: 1;" />
	</view>
Copy the code

2. Use nvUE built-in plug-in BindingX (UniApp is integrated by default).

Nvue built-in plug-in, for details, you can view the effect of introducing BindingX into UniApp native plug-in and refer to BindingX for related methods

const BindingX = uni.requireNativePlugin('bindingx');
Copy the code

3. Specific methods of drag and drop:

1. Relevant data (NVUE)
' 'javascript data() {return {// windowHeight: 200, windowHeight: 400, // Record current position: {x: 0, y: Timer: false,}} ' 'Copy the code

​

2. Wrap BindingX to get dragged elements (add methods to NVUE)
` ` ` javascript / / access elements getEl (el) {if (typeof el = = = 'string' | | typeof el = = = 'number') return el; if (WXEnvironment) { return el.ref; } else { return el instanceof HTMLElement ? el : el.$el; }}, ` ` `Copy the code
3. Bind finger triggers for dragable elementstouchstartEvents (Methods added to NVUE)
```javascript drag_start(e) { const move = this.getEl(this.$refs.move); let oBindingX = BindingX.bind({ anchor: move, eventType: 'pan', props: [{ element: move, property: 'transform.translateX', expression: `x+${this.position.x}`, }, { element: move, property: 'transform.translateY', expression: `y+${this.position.y}`, } ] }, (e) => {if (e.state === 'end') {if (this.timer) {clearTimeout(this.timer); } bindingx. unbind({token: obindingx. token, eventType: 'pan'}) this.position.x += e.tax; this.position.y += e.deltaY; If (-this.position.x >= (this.windowWidth - 193)) {this.position.x = 193 - this.windowWidth; } if (this.position.x > 0) { this.position.x = 0; If (this.position.y < 0) {this.position.y = 0; } if (this.position.y >= (this.windowHeight - 244)) { this.position.y = this.windowHeight - 244; } // finish dragging this.endamaier (); } else {this.timer = setTimeout(() => {this.timer = null; }}}, 50)); } // end drag endAmaier(e) {const my = this.getel (this.$refs.move); let result = BindingX.bind({ eventType: 'timing', exitExpression: 't>200', props: [{ element: my, property: 'transform.translateX', expression: "easeOutElastic(t," + this.position.x + "," + 0 + ",200)", }, { element: my, property: 'transform.translateY', expression: "easeOutElastic(t," + this.position.y + "," + 0 + ",200)", } ] }, (e) => { if (e.state === 'end' || e.state === 'exit') { BindingX.unbind({ token: result.token, eventType: 'timing' }) } }); } ` ` `Copy the code

​

4. Run the project and drag it smoothly