Me gustaría reposicionar el elemento iframe en un sitio web arrastrando el mouse.

Elemento IFrame creado dinámicamente

 // create div to hold iframe let iframeContainer = document.createElement("div"); iframeContainer.style.all = "revert"; iframeContainer.style.position = "absolute"; // create iframe element let iframe = document.createElement("iframe"); iframe.width = "400"; iframe.height = "400"; iframe.style.border = "0px"; // append iframe element to document.body document.body.appendChild(iframeContainer); iframeContainer.appendChild(iframe);

Funciones para habilitar el arrastre de elementos HTML

 function dragIFrameElement(elementToMove, dragControllerElement) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; dragControllerElement.onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: // elementToMove.style.top = elementToMove.offsetTop - pos2 + "px"; // elementToMove.style.left = elementToMove.offsetLeft - pos1 + "px"; elementToMove.style.setProperty( "top", elementToMove.offsetTop - pos2 + "px", "important" ); elementToMove.style.setProperty( "left", elementToMove.offsetLeft - pos1.toString() + "px", "important" ); } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } }

Este código funciona en el elemento div HTML normal, pero no funciona como se esperaba en mi iframeContainer.

Lo que terminó sucediendo es que siempre parece haber algún desplazamiento entre la posición actual de mi mouse y el iframeContainer arrastrado. Se mueve con el mouse mientras trato de arrastrarlo, pero siempre hay un espacio muy grande en el medio.

Uso

 let innerDoc = iframe.contentDocument || iframe.contentWindow.document; // navbar is just an element inside my iframe let navbar = innerDoc.getElementsByClassName("notecard-navbar")[0]; dragIFrameElement(iframeContainer, navbar);

Cualquier ayuda sería muy apreciada.