Hemos configurado una videollamada con webrtc y hemos implementado arrastrar y soltar para intercambiar/cambiar la posición del usuario con HTML y JavaScript.
var dragSrcEl = null; function handleDragStart(e) { this.style.opacity = '0.4'; dragSrcEl = this; e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/html', this.innerHTML); } function handleDragOver(e) { if (e.preventDefault) { e.preventDefault(); } e.dataTransfer.dropEffect = 'move'; return false; } function handleDragEnter(e) { this.classList.add('over'); } function handleDragLeave(e) { this.classList.remove('over'); } function handleDrop(e) { if (e.stopPropagation) { e.stopPropagation(); // stops the browser from redirecting. } if (dragSrcEl != this) { dragSrcEl.innerHTML = this.innerHTML; this.innerHTML = e.dataTransfer.getData('text/html'); } return false; } function handleDragEnd(e) { this.style.opacity = '1'; items.forEach(function (item) { item.classList.remove('over'); }); } let items = document.querySelectorAll('#video .streamDiv');//your specific html element ID and CLASS. console.log("items: in test "+items) for (var i = 0, element; (element = items[i]); i++) { console.log("element: ",element); element.addEventListener('dragstart', handleDragStart, false); element.addEventListener('dragenter', handleDragEnter, false); element.addEventListener('dragover', handleDragOver, false); element.addEventListener('dragleave', handleDragLeave, false); element.addEventListener('drop', handleDrop, false); element.addEventListener('dragend', handleDragEnd, false); }La función de arrastrar y soltar funciona bien, independientemente del contenido, como una imagen o un video estático, el problema es que (no funciona con webrtc) mientras se intercambia/cambia con la transmisión de video de la cámara cada vez que un nuevo usuario se une a la transmisión de su cámara, entonces La transmisión de video de la cámara se inactivó o se cerró. Tome como referencia nuestro problema en cuestión en el siguiente enlace de video: https://drive.google.com/file/d/1Uw7viN_ELOOAUyeQcuGV3iS_rKe1QUL_/view?usp=sharing
¿Algún consejo? ¡Gracias!