[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:
(4032 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:
(4023 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:
(4004 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:
(3994 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:
(3969 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:
(3966 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:
(3955 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:
(3937 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:
(3933 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:
(3930 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:
(3909 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:
(3903 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:
(3878 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

PDF / Print
300_PDF20

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
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022
Veranstaltungen
08.11.2022

Frankfurt, Fraport Conference Center
Dienstag, 08. Nov. 2022, 13.30 - 18.00 Uhr

Seminar

Auf der Enfocus World Tour stellen wir Ihnen gemeinsam mit Enfocus die aktuellen Highlights von Enfocus Switch und dem Impressed Workflow Server (IWS) vor. Wir präsentieren Ihnen anhand typischer Aufgabenstellungen in einem modernen Produktionsbetrieb die Möglichkeiten, die Enfocus Switch für die Automatisierung und Standardisierung von Abläufen bietet. Wir haben sowohl für Produktionsverantwortliche als auch technisch Interessierte ein spannendes Programm vorbereitet, bei dem Sie sicherlich viel Neues erfahren werden, welches Sie in Ihrem eigenen Betrieb umsetzen können. Die Veranstaltung bietet darüber hinaus eine hervorragende Möglichkeit, sich mit anderen Anwendern und Workflow-Spezialisten auszutauschen und Antworten auf konkrete Aufgabenstellungen zu erhalten, welche Sie mit Hilfe von Enfocus Switch/IWS umsetzen möchten.

Wir sind jeweils an 2 Tagen in Frankfurt, Hamburg und München vor Ort. Der erste (halbe) Tag richtet sich in erster Linie an Betriebsleiter und Produktionsverantwortliche in Druckereien - ist also weniger technisch orientiert - sondern gibt einen Überblick zu den heutigen Möglichkeiten einer automatisierten Produktion.

Der zweite Tag (Switch Anwender-Treffen) richtet sich an bestehende Switch-Anwender und Administratoren.

Anmeldung und weitere Infos: https://www.impressed.de/schulung.php?c=sDetail&sid=310

Ja

Organisator: Enfocus/Impressed

Kontaktinformation: Silvia Noack, E-Mailsnoack AT impressed DOT de

https://www.impressed.de/schulung.php?c=sDetail&sid=310

Enfocus World Tour 2022