Problem mit Drag&Drop code von mual, 31.07.2009 16:33

Problem mit Drag&Drop code

mual 31.07.2009 16:33

javascript

Hallo Leute,
ich habe ein Problem mit eingebauten Code (für Drag&Drop) an dem Project, in dem ich beteiligt bin. Das Problem ist,dass Drag und Drop nur mit IE funkz,in den allen anderen Browsern geht es gar nicht. Das code habe ich selber nicht geschrieben, aber ich muss es so anpassen, dass es mit den anderen Browsern funkz

Hier ist der Code

``
<head>
<script type="text/javascript">

var divFollow, divPreview, divDrag, divMove, divParent, divBefore,
divAfter, mouseX, mouseY, halfY, isInDiv;

function debug(s)
{
document.getElementById("debug").innerHTML=s;
}

function getMouseX(e)
{
    return e.pageX
        || ( e.clientX+(document.documentElement.scrollLeft
        || document.body.scrollLeft));
}

function getMouseY(e)
{
    return e.pageY
        || (e.clientY+(document.documentElement.scrollTop
        || document.body.scrollTop));
}

function childDragStart(obj,e)
{
    divDrag=obj;
    divBefore=null;
    divAfter=null;
    divBefore=divDrag.previousSibling;
    divAfter=divDrag.nextSibling;
}

function childDrag(obj,e)
{
    mouseX=getMouseX(e);
    mouseY=getMouseY(e);
    divFollow.innerHTML=obj.innerHTML;
    halfY=divFollow.offsetHeight/2;
    divFollow.style.left=mouseX+15;
    divFollow.style.top=mouseY-halfY;

if((mouseY>divParent.offsetTop+divParent.offsetHeight)
        ||(mouseX>divParent.offsetLeft+divParent.offsetWidth)
        ||(mouseY<divParent.offsetTop)
        ||(mouseX<divParent.offsetLeft)) isInDiv=false;
    else isInDiv=true;

for(var i=0;divParent.childNodes[i];i++)
    {
        node=divParent.childNodes[i];
       if(mouseY-divParent.offsetTop < (node.offsetHeight/2)+node.offsetTop)
        {
            divParent.insertBefore(divPreview,divParent.childNodes[i]);
            return;
        }
    }
    divParent.appendChild(divPreview);
}

function parentDragOver(obj,e)
{
divParent=obj;
}

function parentDrop(obj,e)
{
    var p=document.getElementById("divPreview");
    var n;
    if(divDrag && isInDiv)
    {
        if(p)
        {
            divParent.insertBefore(divDrag,p);
            divParent.removeChild(p);
            divDrag=null;
        }
    }
    else if(divDrag)
    {
        //restore original position

n=divDrag.parentNode;
        if(divAfter) n.insertBefore(divDrag,divAfter);
        else n.appendChild(divDrag);
        divDrag=null;
        if(p) divParent.removeChild(p);
    }
    divFollow.style.left=-1000;
    divFollow.style.top=-1000;
    divDrag=null;
}

//do some initialization.

function initReorderlists(page)
{
eventpage=page; //page to pass reorderlist events to.

divDrag=null;

divFollow=document.createElement("div");
    divFollow.style.border="1px solid black";
    divFollow.style.color="black";
    divFollow.style.fontWeight="bold"
    divFollow.backgound="transparent";
    divFollow.id="divFollow";
    divFollow.style.position="absolute";
    divFollow.style.left=-1000;
    divFollow.style.top=-1000;
    document.body.appendChild(divFollow);

divPreview=document.createElement("div");
    divPreview.innerHTML=" ";
    divPreview.style.color="red";
    divPreview.backgound="transparent";
    divPreview.id="divPreview";
    divPreview.style.border="1px dotted black";
}
</script>
</head>

<div ondragover="parentDragOver(this,event)"
    ondragend="parentDrop(this,event)" id="div1"
    style="border:1px solid black;width:300px">
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div1 child1</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div1 child2</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div1 child3</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div1 child4</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div1 child5</div>
</div>

<div ondragover="parentDragOver(this,event)"
    ondragend="parentDrop(this,event)" id="div2"
    style="border:1px solid black;width:300px">
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div2 child1</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div2 child2</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div2 child3</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div2 child4</div>
    <div><img ondrag="childDrag(this.parentNode,event);"
        ondragstart="childDragStart(this.parentNode,event);"
        src="drag.gif"/>div2 child5</div>
</div>

</body>

ich weiss, dass es ziemlich langer Code, aber ich hoffe, dass ich hier Leute finden, die mir bei dieser Problem hilfen (bin nicht der Experte in Javascript:-)).

Vielen Dank für jede Hilfe vorab

Mual

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

mual: Problem mit Drag&Drop code

Beitrag lesen

Problem mit Drag&Drop code

Problem mit Drag&Drop code