[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:
(3806 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:
(3797 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:
(3778 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:
(3768 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:
(3743 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:
(3740 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:
(3729 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:
(3711 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:
(3707 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:
(3704 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:
(3683 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:
(3677 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:
(3652 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
26.11.2020

Wie schafft man einen gleichbleibenden Farbeindruck im Druck und elektronischer Ausgabe? Peter Jäger erklärt wie es geht!

Zoom Meeting
Donnerstag, 26. Nov. 2020, 19.00 - 21.01 Uhr

Vortrag

Agenda: Vorstellung Verein freieFarbe e.V. und pro2media gmbh Was verlangt der Kunde? Gleichbleibende Farbe über sämtliche Ausgaben? Für welche Ausgaben (Offset- oder Digitaldruck, Kopiersysteme, elektronische Ausgaben) Umgang mit Farben bisher: mehrere Logos- und Bildvarianten Logo Entwicklung heute: anhand pro2media gmbh, ausgehend von nur einer Logovariante Crossmediale Farben bestimmen Einsatz von Hilfsmitteln wie digitaler- und gedruckter Farbatlas und Gamutmap.com Sauberes Farben CD erstellen mit eindeutig definierten Werten Umsetzung in den Softwaren (Word, FileMaker, InDesign, Illustrator, Web CMS, OpenSource usw.) Verarbeitung in den Druckereien (anhand Callas pdfToolbox)

Nein

Organisator: InDesign Usergroup Stuttgart

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

idugs66.eventbrite.com

Grafik- und Bilddaten crossmedial aufbereiten
Veranstaltungen
30.11.2020 - 01.12.2020

Digicomp Academy AG, Limmatstrasse 50, 8005 Zürich
Montag, 30. Nov. 2020, 08.30 Uhr - Dienstag, 01. Dez. 2020, 17.00 Uhr

Kurs

Im Kurs lernen Sie die Schritte vom Import des Rohmaterials bis zum fertig exportierten Clip kennen. Dazu zählen die Materialverwaltung, das Trimmen für Roh- und Feinschnitt, Blenden, Titel und Effekte und eine Übersicht über die wichtigsten Formate.

Preis: CHF 1'700.-
Dauer: 2 Tage

Nein

Organisator: Digicomp Academy AG

Kontaktinformation: Isil Günalp, E-Mailisil.guenalp AT digicomp DOT ch

https://www.digicomp.ch/weiterbildung/software-anwendungs-trainings/adobe-trainings/video-und-audio-publishing/adobe-premiere-pro-cc/kurs-adobe-premiere-pro-cc-basic

Neuste Foreneinträge


Transparente Klebefolie bedrucken

Glyphen-Salat

Grep suche nur erster Fund anzeigen

Script um 2 Items von CC Library auf eine Seite zu plazieren

Bilder exportieren

Satz für blinde bzw. seheingeschränkte Menschen

Mockup Alias Ebene erstellen

Preflight Ticket Signature Preflight.p12

Fußnote im Fließtext Fett dargestelllt?

Abbildungsunterschriften: Numerierung pro Kapitel neu
medienjobs