1

我有一个网页，它使用可拖动元素来安排应用程序以符合用户的规范。用户可以拖动（onmousedown）一个框并将其与其他框内联。

这些框内是输入、文本区域、单选和复选框类型的输入。

一切都在 IE8 中完美运行 IE9、Firefox 17.0.1 和 Firefox 14.0.1 的问题（只是我测试过的版本）

问题是当我单击输入框或文本框时，onmousedown 事件会触发并窃取焦点。一旦我释放鼠标，没有任何反应将焦点释放回输入框。收音机和复选框工作得很好。

有多个输入和多个元素。

有人有想法么？我真的没有一个开放的例子可以玩，因为它是在一个登录受限的环境中。

我整天都在寻找这个问题，任何方向都会很棒！

function initdragableElements()
{
    dragableElementsParentBox = document.getElementById('dragableElementsParentBox');
    insertionMarkerDiv = document.getElementById('insertionMarker');
    insertionMarkerLine = document.getElementById('insertionMarkerLine');
    dragableAreaWidth = dragableElementsParentBox.offsetWidth;

    if(!useRectangle){
        dragDropMoveLayer = document.createElement('DIV');
        dragDropMoveLayer.id = 'dragDropMoveLayer';     
        document.body.appendChild(dragDropMoveLayer);   
    }

    var subDivs = dragableElementsParentBox.getElementsByTagName('*');
    var countEl = 0;
    for(var no=0;no<subDivs.length;no++){
        var attr = subDivs[no].getAttribute('dragableBox');
        if(opera)attr = subDivs[no].dragableBox;
        if(attr=='true'){
            subDivs[no].style.cursor='move';    
            subDivs[no].onmousedown = initDrag;

            var index = dragableObjectArray.length;
            dragableObjectArray[index] = new Array();
            ref = dragableObjectArray[index];
            ref['obj'] = subDivs[no];
            ref['width'] = subDivs[no].offsetWidth;
            ref['height'] = subDivs[no].offsetHeight;
            ref['left'] = getLeftPos(subDivs[no]);
            ref['top'] = getTopPos(subDivs[no]);
            ref['index'] = countEl;
            countEl++;
        }
    }

    /* Creating rectangel indicating where item will be dropped */
    rectangleDiv = document.createElement('DIV');
    rectangleDiv.id='rectangle';
    rectangleDiv.style.display='none';
    dragableElementsParentBox.appendChild(rectangleDiv);


    document.body.onmousemove = moveDragableElement;
    document.body.onmouseup = stop_dragDropElement;
    document.body.onselectstart = cancelSelectionEvent;
    document.body.ondragstart = cancelEvent;
    window.onresize = repositionDragObjectArray; 

    documentHeight = document.documentElement.clientHeight;
}

function initDrag(e)
{
    if(document.all)e = event;
    mouse_x = e.clientX;
    mouse_y = e.clientY;
    if(!documentScrollHeight)documentScrollHeight = document.documentElement.scrollHeight + 100;
    el_x = getLeftPos(this)/1;
    el_y = getTopPos(this)/1;
    dragObject = this;
    if(useRectangle){
        rectangleDiv.style.width = this.clientWidth - (rectangleBorderWidth*2) +'px';
        rectangleDiv.style.height = this.clientHeight - (rectangleBorderWidth*2) +'px';
        rectangleDiv.className = this.className;
    }else{
        insertionMarkerLine.style.width = '6px';
    }
    dragDropTimer = 0;
    dragObjectNextObj = false;
    if(this.nextSibling){
        dragObjectNextObj = this.nextSibling;
        if(!dragObjectNextObj.tagName)dragObjectNextObj = dragObjectNextObj.nextSibling;
    }
    initDragTimer();
    return false;
}
4

0 回答 0