Drag & Drop

M

muga

Mitglied
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

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>

<div id="debug"></div>

</body>

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

Vielen Dank für jede Hilfe vorab

Mual
 
Hallo
danke dir die schnelle Antwort, ich glaube, dass der Fehler daran liegt, dass ich für die Bewegung eines Bildes z.B ondrag=ChildDrag() oder ondragstart=ChildDragStart() und das funktioniert gar nicht bei Mozilla Firefox, gibt es irgendwie eine Moglichkeit, ondrag in Fierfox zu benutzen.

danke

mual
 
Hallo Versuch es mal so:

Javascript: Dein Objekt bzw. Objekte
Code: 
function dragstart(element) {
     //Wird aufgerufen, wenn ein Objekt bewegt werden soll.
     //Parameter element: Das zu bewegende Objekt.

    dragobjekt = element;
    dragx = posx - dragobjekt.offsetLeft;
    dragy = posy - dragobjekt.offsetTop;
  }

Und hier der Start im HTML, funktioniert im IE und Fire Fox
HTML: 
</script>
  </head>
  <body onload="draginit()">
  <div onmousedown="dragstart(this)" style="position:absolute;top:0px;left:0px;height:100px;width:100px;background:#ff0000"> </div>

  <div onmousedown="dragstart(this)" style="position:absolute;top:200px;left:0px;height:100px;width:100px;background:#00ff00"> </div>
  </body>
  </html>

Gruß
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück