[GastForen Programmierung/Entwicklung JavaScript drag und drop skript

  • Suche
  • Hilfe
  • Lesezeichen
  • Benutzerliste
Themen
Beiträge
Moderatoren
Letzter Beitrag

drag und drop skript

henry 5
Beiträge gesamt: 97

25. Mär 2008, 16:13
Beitrag # 1 von 13
Bewertung:
(3818 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)
X

drag und drop skript

SabineP
Beiträge gesamt: 7586

25. Mär 2008, 16:40
Beitrag # 2 von 13
Beitrag ID: #342942
Bewertung:
(3809 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/
Gruß Sabine


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:
(3790 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:
(3780 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


http://www.aurahysil.de?hds Mit Aurahysil Freizeit schaffen - Beschichtungen der besonderen Art - http://www.intermedia-bg.de?hds INTERMEDIA bürogemeinschaft


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:
(3755 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:
(3752 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! ;-)


http://www.aurahysil.de?hds Mit Aurahysil Freizeit schaffen - Beschichtungen der besonderen Art - http://www.intermedia-bg.de?hds INTERMEDIA bürogemeinschaft


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:
(3741 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:
(3723 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


http://www.aurahysil.de?hds Mit Aurahysil Freizeit schaffen - Beschichtungen der besonderen Art - http://www.intermedia-bg.de?hds INTERMEDIA bürogemeinschaft


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:
(3719 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


http://www.aurahysil.de?hds Mit Aurahysil Freizeit schaffen - Beschichtungen der besonderen Art - http://www.intermedia-bg.de?hds INTERMEDIA bürogemeinschaft


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:
(3716 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


http://www.aurahysil.de?hds Mit Aurahysil Freizeit schaffen - Beschichtungen der besonderen Art - http://www.intermedia-bg.de?hds INTERMEDIA bürogemeinschaft


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:
(3695 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:
(3689 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>


Nu is aber Ferierabend. ;-)

Gruß Sven


http://www.aurahysil.de?hds Mit Aurahysil Freizeit schaffen - Beschichtungen der besonderen Art - http://www.intermedia-bg.de?hds INTERMEDIA bürogemeinschaft


als Antwort auf: [#342994]

drag und drop skript

henry 5
Beiträge gesamt: 97

25. Mär 2008, 21:30
Beitrag # 13 von 13
Beitrag ID: #343000
Bewertung:
(3664 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen
hallo sven
merci für die inputs!
– ich installiere grad win xp per bootcamp. dann kann ich selber testen...

beste grüsse
marc


als Antwort auf: [#342995]
X

Aktuell

Veranstaltungskalender

Hier können Sie Ihre Anlässe eintragen, welche einen Zusammenhang mit den Angeboten von HilfDirSelbst.ch wie z.B. Adobe InDesign, Photoshop, Illustrator, PDF, Pitstop, Affinity, Marketing, SEO, Büro- und Rechtsthemen etc. haben. Die Einträge werden moderiert freigeschaltet. Dies wird werktags üblicherweise innert 24 Stunden erfolgen.

pdf-icon Hier eine kleine Anleitung hinsichtlich Bedeutung der auszufüllenden Formularfelder.

Veranstaltungen
21.01.2021 - 22.01.2021

Digicomp Academy AG, Bern oder Basel
Donnerstag, 21. Jan. 2021, 08.30 Uhr - Freitag, 22. Jan. 2021, 17.00 Uhr

Kurs

Dieser Basic-Kurs ist der perfekte Einstieg in die Welt von InDesign, dem vielseitigen Layout-Programm. Sie lernen, wie InDesign aufgebaut ist, wie saubere Dokumente erstellt werden und wie man korrekt mit gelieferten InDesign-Projekten umgeht.

Dauer: 2 Tage
Preis: CHF 1'400.–

Ja

Organisator: Digicomp Academy AG

Kontaktinformation: Kundenberater-Team, E-Mailkundenberatung AT digicomp DOT ch

digicomp.ch/d/INDEM1

Veranstaltungen
21.01.2021

Illustrator - das unbekannte Wesen

Online
Donnerstag, 21. Jan. 2021, 19.00 Uhr

Vortrag

Millionen Funktionen, und immer kommen neue dazu! Monika Gause ist jeden Januar aufs Neue ein gern gesehener Gast bei der IDUG Stuttgart. - Sie bringt alle Neuerungen mit, die 2020 dazukamen und jede Menge Tipps und Tricks. - Zudem wird sie uns informieren, was wir in Illustrator beachten müssen, wenn wir Daten fürs Web erstellen bzw. aufbereiten. - Wichtig zu wissen: "Dos and Don'ts" in Illustrator. Welche Fehler sollte man dringend vermeiden und was muss man unbedingt tun, damit es Spaß macht mit Illustrator zu arbeiten. - Dieses Jahr hast Du zusätzlich die Möglichkeit Monika im Voraus Fragen zu stellen. Fülle dieses Formular mit deinen Fragen; auch Beispieldateien sind anfügbar: https://forms.gle/fJmF8C6MjbDoEhED8

Nein

Organisator: InDesign Usergroup Stuttgart

Kontaktinformation: Christoph Steffens, E-Mailidug AT satzkiste DOT de

https://idugs67.eventbrite.de/

IDUGS #67 Illustrator mit Monika Gause

Neuste Foreneinträge


Sommerurlaub ist nicht weit?

Anwendungsrahmen ausschalten auf Windows-PC?

Umstieg auf Linux ...

[GREP] beliebige Zeichen finden und durch selbe Anzahl an Leerzeichen oder Anzahl Zeichen "x" ersetzen

ICC Profil für Papier Munken Print crema FSC 90 g/m² mit 1,5 Vol.

PSD CS6 (!) Mac: Dialog "Dateiinformationen" Fenster leer und Sackgasse

weitere peinliche Fragen zu Selbstverständlichkeiten

Scannen mit Affinity Photo (V 1.8.3.641) in Win 10

Hilfe

Bilder High> Low
medienjobs