drag und drop skript

[Gast] Foren Programmierung/Entwicklung JavaScript drag und drop skript

Programmierung/Entwicklung

Themen

Beiträge

Moderatoren

Letzter Beitrag

JavaScript

1411

5354

Thomas Richard

28. Feb 2024, 15:17

Nic1703

henry 5

Beiträge gesamt: 97

25. Mär 2008, 16:13
Beitrag # 1 von 13
Bewertung:
(4238 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

hallo
ich verwende auf einer page das javascript von brainjar um divs "ziehbar", bzw. "draggable" zu machen.
http://www.brainjar.com/dhtml/drag/demo.html

das script läuft wunderbar in safari und firefox (mac) und im ie6/win.
im neuesten safari gibt es die möglichkeit unter "develop" den benutzeragent auf "Internet Explorer" umzustellen. dann wird mir folgender fehler ausgegeben:
"Value undefined (result of expression document.attachEvent) is not object".

die browserabfrage folgt über den user.agent, das skript unterscheidet aber nur zwischen ie und netscape...
(das skript stammt aus 2001)...
ich habe nun kurzerhand die "browserweiche" entfernt und die abfragen ob ie oder ns umgeschrieben.

nun bin ich mir nicht sicher ob das so im ie läuft oder nicht:

http://www.beekhuis.ch/dragtest.html

Code

var zIndex=3 
 
function up(what){ 
zIndex++; 
what.style.zIndex=zIndex} 
 
var dragObj=new Object() 
 
function dragStart(event,id){ 
var el 
var x,y 
if(id) 
 dragObj.elNode=document.getElementById(id) 
else{ 
 if(window.event) 
 dragObj.elNode=window.event.srcElement 
 else 
 dragObj.elNode=event.target 
 if(dragObj.elNode.nodeType==3) 
 dragObj.elNode=dragObj.elNode.parentNode} 
if(window.event){ 
 x=window.event.clientX+document.documentElement.scrollLeft 
 +document.body.scrollLeft 
 y=window.event.clientY+document.documentElement.scrollTop 
 +document.body.scrollTop} 
else{ 
 x=event.clientX+window.scrollX 
 y=event.clientY+window.scrollY} 
 dragObj.cursorStartX=x 
 dragObj.cursorStartY=y 
 dragObj.elStartLeft=parseInt(dragObj.elNode.style.left,10) 
 dragObj.elStartTop=parseInt(dragObj.elNode.style.top,10) 
 if(isNaN(dragObj.elStartLeft))dragObj.elStartLeft=0 
 if(isNaN(dragObj.elStartTop))dragObj.elStartTop=0 
 if(document.attachEvent){ 
 document.attachEvent("onmousemove",dragGo) 
 document.attachEvent("onmouseup",dragStop) 
 window.event.cancelBubble=true 
 window.event.returnValue=false} 
 else{ 
 document.addEventListener("mousemove",dragGo,true) 
 document.addEventListener("mouseup",dragStop,true) 
 event.preventDefault()}} 
 
function dragGo(event){ 
var x,y 
if(window.event){ 
 x=window.event.clientX+document.documentElement.scrollLeft 
 +document.body.scrollLeft 
 y=window.event.clientY+document.documentElement.scrollTop 
 +document.body.scrollTop} 
else{ 
 x=event.clientX+window.scrollX 
 y=event.clientY+window.scrollY} 
 
dragObj.elNode.style.left=(dragObj.elStartLeft+x-dragObj.cursorStartX)+"px" 
dragObj.elNode.style.top=(dragObj.elStartTop+y-dragObj.cursorStartY)+"px" 
if(window.event){ 
 window.event.cancelBubble=true 
 window.event.returnValue=false} 
else{ 
event.preventDefault()}} 
 
function dragStop(event){ 
if(document.detachEvent){ 
 document.detachEvent("onmousemove",dragGo) 
 document.detachEvent("onmouseup",dragStop)} 
else{ 
 document.removeEventListener("mousemove",dragGo,true) 
 document.removeEventListener("mouseup",dragStop,true)}}

(Dieser Beitrag wurde von henry 5 am 25. Mär 2008, 16:24 geändert)

drag und drop skript

SabineP

Beiträge gesamt: 7586

25. Mär 2008, 16:40
Beitrag # 2 von 13
Beitrag ID: #342942
Bewertung:
(4229 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo henry,

>> die browserabfrage folgt über den user.agent

Das ist sehr unsicher, denn der User-Agent sagt nichts aus über die Fähigkeiten des Browsers.

Probier mal das hier, vielleicht klappt es ja auch in Safari:
http://www.dynamicdrive.com/dynamicindex11/domdrag/

als Antwort auf: [#342933]

drag und drop skript

henry 5

Beiträge gesamt: 97

25. Mär 2008, 17:05
Beitrag # 3 von 13
Beitrag ID: #342955
Bewertung:
(4210 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

hallo sabine

das script läuft wunderbar in safari und firefox (mac) und im ie6/win.
nur eben die browserabrage gefällt mir nicht.
so habe ich das skript umgeschrieben... bin aber nicht sicher ob ich fehler gemacht habe, auf mac safari und firefox läufts.
script siehe oben...

gruss
henry

als Antwort auf: [#342942]
(Dieser Beitrag wurde von henry 5 am 25. Mär 2008, 17:09 geändert)

drag und drop skript

Intermedia

Beiträge gesamt: 1287

25. Mär 2008, 17:24
Beitrag # 4 von 13
Beitrag ID: #342962
Bewertung:
(4200 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hi,

hier mein Testbericht unter Windows:

IE 5.01 ok
IE 5.5 ok
IE 6 ok
IE 7 ok
Opera 8.54 ok
Opera 9 ok
Safari ok
FF 2.x ok
NS 7.1 ok

Linux:
FF 2.x ok

Gruß Sven

als Antwort auf: [#342955]

drag und drop skript

henry 5

Beiträge gesamt: 97

25. Mär 2008, 18:16
Beitrag # 5 von 13
Beitrag ID: #342968
Bewertung:
(4175 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

hallo sven
tausenddank fürs ausführliche testen. scheint ok zu sein...:-)(?)

komischerweise wird anscheinend die funktion

function up(div){
zIndex++;
div.style.zIndex = zIndex}

von ie ignoriert...? – kann das jemand bestätigen? (die divs sollten bei click nach vorne kommen)

merci und gruss
henry

als Antwort auf: [#342962]

drag und drop skript

Intermedia

Beiträge gesamt: 1287

25. Mär 2008, 18:24
Beitrag # 6 von 13
Beitrag ID: #342970
Bewertung:
(4172 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hi Henry

ja kann ich bestätigen, hatte vorhin nicht darauf geachtet.

Versuch es hart ob sich die Div im z-index beeinflussen lassen.
Nenne mal die Variable eventuell anders, nicht zIndex.

Verwende mal document.getElementById(div).style.zIndex, damit sollte es aber gehen.

Teste auch mal den Wert der Variable mit einem alert ob der in IE wirklich erhöht wird.

Gruß Sven

P.S. finde übrignes die Idee auf deiner Seite gut, ist mal was anderes! ;-)

als Antwort auf: [#342968]
(Dieser Beitrag wurde von Intermedia am 25. Mär 2008, 18:25 geändert)

drag und drop skript

henry 5

Beiträge gesamt: 97

25. Mär 2008, 18:46
Beitrag # 7 von 13
Beitrag ID: #342974
Bewertung:
(4161 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

hallo sven
habe hier leider nur ein mac zum testen...

habe das skript in
document.getElementById(div).style.zIndex geändert.

merci fürs testen.

http://www.beekhuis.ch/dragtest.html

als Antwort auf: [#342970]

drag und drop skript

Intermedia

Beiträge gesamt: 1287

25. Mär 2008, 19:15
Beitrag # 8 von 13
Beitrag ID: #342985
Bewertung:
(4143 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hmm....,

also im FF wird die Funktion aufgerufen und ich bekomme auch den Wert angezeigt.

Irgendwie wird die Funktion bei IE nicht aufgerufen oder nicht vollständig ausgeführt.

Versuch es mal in der Funktion die Reihenfolge zu ändern, und lass dir mal den Übergabewert ausgeben, etwa so:

Code

function up(divv){ 
zIndexVar++; 
alert(zIndexVar); 
alert(divv); 
 
document.getElementById(divv).style.zIndex=zIndexVar; 
}

Trotzdem würde ich mal vorschlagen die Variablenbezeichnungen zu ändern, es gibt reservierte Wörter, u.U. könnte es sein das der IE ein paar Wörter mehr ignoriert.

Dann mal viel Erfolg!

Hier müßte irgendwo ein Link rumschwirren den Sabine mal gepostet hat, dort kann man verschiedene Browser simulieren, such mal danach.

Wenn es dir was nützt hab ich hier mal ein Beispiel indem ich auch den z-index ändere, das funktioniert auch im IE usw. http://sms.intermedia-bg.de/tisch/tisch.php

Gruß Sven

als Antwort auf: [#342974]

drag und drop skript

Intermedia

Beiträge gesamt: 1287

25. Mär 2008, 19:28
Beitrag # 9 von 13
Beitrag ID: #342989
Bewertung:
(4139 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ich hab mal ein einfaches Beispiel gemacht, das funktioniert auch im IE, eventuell hilft es dir weiter:

Code

<html> 
<head> 
<title> Hier Seitentitel </title> 
 
<script language="JavaScript"> 
	zIndexVar =1; 
function up(div){ 
zIndexVar++; 
document.getElementById(div).style.zIndex=zIndexVar; 
} 
 
</script> 
 
 
 
<STYLE type="text/css"> 
 
        a      {text-decoration: none} 
         
        div{ 
        
        position:absolute; 
        } 
        #a1{ 
        background-color: red; 
         width:400px; 
        height:400px; 
        } 
         #a2{ 
        background-color: blue; 
         width:300px; 
        height:300px; 
        } 
         #a3{ 
        background-color: yellow; 
         width:100px; 
        height:100px; 
        } 
        </STYLE> 
         
        </head> 
        <body> 
        <div id="a1" onMouseDown="up('a1')">div 1</div> 
        <div id="a2" onMouseDown="up('a2')">div 2</div> 
        <div id="a3" onMouseDown="up('a3')">div 3</div> 
         
         
        </body> 
         
        </html>

Gruß Sven

als Antwort auf: [#342974]

drag und drop skript

Intermedia

Beiträge gesamt: 1287

25. Mär 2008, 19:35
Beitrag # 10 von 13
Beitrag ID: #342990
Bewertung:
(4136 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Ich glaub das ich deinen Fehler hab,
du setzt das Event auf die Ebene mit einem Inhalt, dein drag erfolgt aber auf den oberen Teil also den Kopf/Überschrift wie man es auch nennen mag.
Dadurch wird die Funktion nicht aufgerufen da diese Ebene vermutlich weiter unten liegt und nicht aktiv ist.

Vermutlich kommt der IE mit der Konstellation der div's nicht zurecht.

Gruß Sven

als Antwort auf: [#342974]
(Dieser Beitrag wurde von Intermedia am 25. Mär 2008, 19:39 geändert)

drag und drop skript

henry 5

Beiträge gesamt: 97

25. Mär 2008, 20:14
Beitrag # 11 von 13
Beitrag ID: #342994
Bewertung:
(4115 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

hallo sven
habe den aufruf nun in das davorliegende div verfrachtet.
funktionierts jetzt?

vielen dank und beste grüsse
henry

als Antwort auf: [#342990]

drag und drop skript

Intermedia

Beiträge gesamt: 1287

25. Mär 2008, 20:28
Beitrag # 12 von 13
Beitrag ID: #342995
Bewertung:
(4109 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hi Henry,

das sieht noch nicht so gut aus. :-(

Teste mal diese Variante, hab jetzt auf ein Event zwei Funktionsaufrufe, bei mir sieht es gut aus.

Code

 
<div id="test1" class="window"  style="visibility:visible"> 
  <div id="test1drag" class="drag" style="width:300px; height:200px; top:-200px; left:-100px"> 
    <div id="test1dragger" class="dragger" onMouseDown="dragStart(event,'test1drag');up('test1')" style="width:300px"></div> 
  </div> 
</div> 
<div id="test2" class="window"  style="visibility:visible"> 
  <div id="test2drag" class="drag" style="width:300px; height:200px; top:-100px; left:-200px" > 
    <div id="test2dragger" class="dragger" onMouseDown="dragStart(event,'test2drag');up('test2')" style="width:300px"></div> 
  </div> 
</div> 
<div id="test3" class="window"  style="visibility:visible"> 
  <div id="test3drag" class="drag" style="width:300px; height:200px; top:-50px; left:-300px" > 
    <div id="test3dragger" class="dragger" onMouseDown="dragStart(event,'test3drag');up('test3')" style="width:300px" ></div> 
  </div> 
</div>