tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
915
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 31.07.09 17:28 #1
    muga muga ist offline Mitglied
    Registriert seit
    Mar 2009
    Beiträge
    22
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

    <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
     
    Zitieren Zitieren
  2. 31.07.09 18:00 #2
    Avatar von webmanie
    webmanie webmanie ist offline Mitglied Silber
    Registriert seit
    Mar 2007
    Beiträge
    50
    Hallo,

    könntest du mal die Fehler posten die Dir IE/Firefox etc. liefern?
    Dann spart man sich auch einen aufwendigen Code review.

    Schau Dir doch mal folgendes Beispiel an:
    http://aktuell.de.selfhtml.org/artik...g_and_drop.htm

    Dieses Funktioniert in allen Browsern, und ist sehr leicht erweiterbar.
     
    webmanie - Es stellt sich ein Stimmungshoch ein sobald man online ist, meist ohne Nebenwirkungen.
    http://www.webmanie.de
    Zitieren Zitieren
  3. 31.07.09 18:31 #3
    muga muga ist offline Mitglied
    Registriert seit
    Mar 2009
    Beiträge
    22
    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
     
    Zitieren Zitieren
  4. 03.08.09 17:42 #4
    Avatar von webmanie
    webmanie webmanie ist offline Mitglied Silber
    Registriert seit
    Mar 2007
    Beiträge
    50
    Hallo Versuch es mal so:

    Javascript: Dein Objekt bzw. Objekte
    Code :
    1
2
3
4
5
6
7
8

    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-Code:
    </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ß
     
    webmanie - Es stellt sich ein Stimmungshoch ein sobald man online ist, meist ohne Nebenwirkungen.
    http://www.webmanie.de
    Zitieren Zitieren
« Datei Zeilenweise einlesen | ExtJs GridPanel PagingToolBar Gruppen »

Ähnliche Themen

  1. Drag n Drop
    Von kerstel im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 21.01.10, 13:36
  2. SWT Drag&Drop
    Von HuberDe im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 0
    Letzter Beitrag: 27.09.07, 08:15
  3. Drag & Drop mit <tr> ?!
    Von ev0lst im Forum Javascript & Ajax
    Antworten: 3
    Letzter Beitrag: 12.08.07, 10:23
  4. SWT: Ghosted Drag-Image bei Drag & Drop
    Von snake_plissken im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 1
    Letzter Beitrag: 15.04.06, 23:36
  5. Drag and Drop
    Von jorgeHX im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 0
    Letzter Beitrag: 23.06.04, 15:07