mual: Problem mit Drag&Drop code

SELF-Forum

Problem mit Drag&Drop code

mual
– Informationen zu den Bewertungsregeln

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>

<body onload="initReorderlists()">

<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>

<div id="debug"></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

  1. Problem mit Drag&Drop code

    ChrisB
    – Informationen zu den Bewertungsregeln

    Hi,

    Das Problem ist,dass Drag und Drop nur mit IE funkz,

    Stimmt - dieses Problem hat man sich dadurch eingehandelt, dass man die Seite im Quirks Mode betreibt. Ohne diesen würde der sich IE nämlich bei dem zuerst offensichtlichen Fehler genauso verweigern, wie andere Browser.

    in den allen anderen Browsern geht es gar nicht.

    Der zuerst ins Auge springende Fehler ist der, dass CSS-Eigenschaften ungültige Werte zugewiesen werden, bspw. hier:

    divFollow.style.left=mouseX+15;
        divFollow.style.top=mouseY-halfY;

    MfG ChrisB

    --
    Light travels faster than sound - that's why most people appear bright until you hear them speak.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Problem mit Drag&Drop code

      mual
      – Informationen zu den Bewertungsregeln

      Der zuerst ins Auge springende Fehler ist der, dass CSS-Eigenschaften ungültige Werte zugewiesen werden, bspw. hier:

      divFollow.style.left=mouseX+15;
          divFollow.style.top=mouseY-halfY;

      Hallo Chris

      ich danke dir die schnelle Antwort, warum sind die Werte ungültig? wenn mouseX = getMaouseX ein Wert zurückliefert, ich habe gerade auch gelesen, dass ondrag und ondragend nur IE funkz, und bei mir es ist der Fall, dass der Bild z.B durch ondrag=ChildDrag(...), kann man das irgendwie durch ein andere event änderen.

      Betse Dank

      mual

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Problem mit Drag&Drop code

        Cheatah
        – Informationen zu den Bewertungsregeln

        Hi,

        divFollow.style.left=mouseX+15;

        ich danke dir die schnelle Antwort, warum sind die Werte ungültig?

        wenn mouseX beispielsweise 42 enthält, würde obige Angabe dem Folgenden entsprechen:

        selektor { left: 57; }

        Und 57 Teppichfadenlängen passen einfach nicht auf den Bildschirm.

        Cheatah

        --
        X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
        X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
        X-Will-Answer-Email: No
        X-Please-Search-Archive-First: Absolutely Yes
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Problem mit Drag&Drop code

          mual
          – Informationen zu den Bewertungsregeln

          Hi,

          divFollow.style.left=mouseX+15;

          ich danke dir die schnelle Antwort, warum sind die Werte ungültig?

          wenn mouseX beispielsweise 42 enthält, würde obige Angabe dem Folgenden entsprechen:

          selektor { left: 57; }

          Und 57 Teppichfadenlängen passen einfach nicht auf den Bildschirm.

          Cheatah

          Danke :-) das habe ich gerade geändert, hast du vielleicht eine Idee wie ich das Event ondrag in Mozilla aufrufe?

          Vielen Dank für dein Post

          mual

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln