Перетаскиваемый объект внутри перетаскиваемого фрейма

Question

Мне нужна помощь здесь ... Я пытаюсь сделать сайт с системой узлов.

Я создал несколько перетаскиваемых окон с iFrames внутри них. Это прекрасно работает.

Затем я сделал страницу, которая может порождать "узлы". Я хочу иметь возможность перетаскивать узлы ...

Так вот мой код:

function insertNode(html, link, color){
        var node = "<div id='" + nodeCounter + "' style='background-color:" + color + "' class='node'>";
        node += html;
        node += "</div>";
        document.getElementById("canvas").innerHTML += node;
        document.getElementById(nodeCounter).style.position = "absolute";
        dragElement(document.getElementById(nodeCounter));
        nodeCounter ++;
    }


    function setIframePos(x, y){
        ix = x;
        iy = y;
    }

    //draggable
    function dragElement(elmnt) {
        var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
        if (document.getElementById(elmnt.id + "header")) {
            // if present, the header is where you move the DIV from:
            document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
        } else {
            // otherwise, move the DIV from anywhere inside the DIV:
            elmnt.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:
            elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
            elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        }

        function closeDragElement() {
            // stop moving when mouse button is released:
            document.onmouseup = null;
            document.onmousemove = null;
        }
    }

Но когда я пытаюсь переместить узел сейчас, он просто улетает очень быстро. .. Я предполагаю, что это имеет какое-то отношение к тому, что clientX & Y - это абсолютные корнинаты (от границы окна браузера), а elmnt.top - от вершины iFrame.

Однако я действительно не знаюкак это исправить ...

Вот скриншот страницы:

Большое спасибо :) Жюль