Problem z niespodziewana zmianą rodzica obiektu w skrypcie JS Opcje

[sebap123]

Próbuję napisać skrypt drag-n-drop (ponieważ nie znalazłem takiego który by spełniał wszystkie moje wymogi), który jest zlepkiem paru zebranych skryptów jakie znalazłem i mojej inwencji. Wszystko fajnie szło, ale wyskoczył mi jakiś głupi błąd, którego w ogóle nie mogę naprawić.
Całego skryptu tutaj nie będę umieszczał, bo bym tylko zaśmiecił posta. Zamiast tego napisze o co mi chodzi i wkleję najważniejsze fragmenty. Więc każdy element do przesuwania jest dodawany przy pomocy jednej funkcji (addElement). Po dodaniu jest on inicjalizowany, tak aby mógł być przesuwany. Obiekt ten po kliknięciu w link ma być również edytowalny (aktualnie walczę ze zmianą rozmiaru). Tutaj mam właśnie błąd. Z niewiadomej mi przyczyny jak są dwa obiekty i oba zostaną aktywowane (uruchomiona zostanie funkcja resizeObject) to przy próbie wyłączenia (czyli uruchomieniu funkcji endResizeObject) nagle jeden link - trudno jest mi ustalić zasadę który dokładnie, "traci swojego rodzica" i akcje wykonywane na nim oddziałują na drugi obiekt. Tak wyglądają fragmenty skryptu:

Kod

function addElement(prf,cnt,type) {
    if(!type)
    {
        type = 'div';
    }
    var prefix = prf;
    var container = cnt;
    var type = type;
    var i = 0;
    while(document.getElementById(prefix+i)!=null)
        i++
    var newElement;
    var newElementId;
    var positionX = container.offsetLeft;
    var positionY = container.offsetTop;
    switch(type)
    {
        case 'div':
            newElement = document.createElement('div');
            newElementId = prefix+i;
            newElement.setAttribute('id',newElementId);
            document.body.appendChild(newElement);
            newElement.style.position = 'absolute';
            newElement.style.width = "100px";
            newElement.style.height = "100px";
            newElement.style.left = positionX+'px';
            newElement.style.top = positionY+'px';
            newElement.style.background = "#E6E6E6";
            newElement.style.cursor = "move";
            break;
    }
        
    
    dd.initElement(newElement, container);
}

function addEventSimple(obj,evt,fn) {
    if (obj.addEventListener)
        obj.addEventListener(evt,fn,false);
    else if (obj.attachEvent)
        obj.attachEvent('on'+evt,fn);
}

function removeEventSimple(obj,evt,fn) {
    if (obj.removeEventListener)
        obj.removeEventListener(evt,fn,false);
    else if (obj.detachEvent)
        obj.detachEvent('on'+evt,fn);
}

Kod

initElement(element, elementArea){
//(...)
keyHTML: '<a href="#" class="check">#</a>',
        resizeHTML: '<a href="#" class="check"><></a>',
//(...)
element.addEventListener("mousedown",dd.startDragMouse, false);
                element.innerHTML += dd.resizeHTML;
        element.innerHTML += dd.keyHTML;
        var links = element.getElementsByTagName('a');
        var keyLink = links[links.length-1];
        keyLink.relatedElement = element;
        addEventSimple(keyLink,'click',dd.startDragKeys);
                var resizeLink = links[links.length-2];
                resizeLink.relatedElement = element;
                addEventSimple(resizeLink,'click',dd.resizeObject);
                console.log('on - resize(644): '+element.id);
//(...)

Kod

resizeObject: function(){
            var elementWidth = dd.El.offsetWidth;
            var elementHeight = dd.El.offsetHeight;
            var links = dd.El.getElementsByTagName('a');
            var keyLink = links[links.length-1];
            keyLink.style.display = "none";
            dd.El.style.border = '2px red dashed';
            var resizeLink = links[links.length-2];
            resizeLink.relatedElement = dd.El;
            removeEventSimple(resizeLink,'click',dd.resizeObject);
            console.log('off - resize(837): '+dd.El.id);
            addEventSimple(resizeLink,'click',dd.endResizeObject);
            console.log('on - endResize(839): '+dd.El.id);
            resizeLink.style.marginLeft = elementWidth/2+'px';
            removeEventSimple(dd.El,'mousedown',dd.startDragMouse);
        },
        endResizeObject: function(){
            var links = dd.El.getElementsByTagName('a');
            var keyLink = links[links.length-1];
            keyLink.relatedElement = dd.El;
            keyLink.style.display = '';
            dd.El.style.border = '0px';
            var resizeLink = links[links.length-2];
            resizeLink.relatedElement = dd.El;
            removeEventSimple(resizeLink,'click',dd.endResizeObject);
            console.log('off - endResize(853): '+dd.El.id);
            addEventSimple(resizeLink,'click',dd.resizeObject);
            console.log('on - resize(855): '+dd.El.id);
            resizeLink.style.marginLeft = 0;
        },

Mam nadzieję, że to co napisałem jest zrozumiałe, a jeszcze wywołanie na stronie:

[HTML] pobierz, plaintext 
<a href="#" onclick="addElement('element','someContainer','div');">Div</a>
[HTML] pobierz, plaintext 

Będę wdzięczny, jeśli ktoś mi podpowie gdzie popełniam błąd, bo już nie ma pomysłu i zaczyna to być trochę wkurzające.

Czy nikt nie może mi podpowiedzieć, co z tym zrobić? Nie sądze, żeby to był jakiś wielki problem dla osoby, która już trochę pisze w JS.