Grafik ziehen und verschieben
Eine Spielerei die ich mal für jemanden in einem Forum (Hier der Link zum Thread) gemacht habe. Weil's so toll aussieht mach ich's mal öffentlich. Wie das Skript eingesetzt werden kann, muss sich jeder selbst überlegen.
Quellcode
Und hier der Quellcode, ich hab den nur im Firefox und IE getestet. Um ihn zu nutzen muss er in eine Seite kopiert werden und die Elemente die verschoben werden sollen müssen eine ID haben, die img enthält. Damit sie sich verschieben lassen müssen sie die Eigenschaft position:absolute haben
javascript: js/dragpull.js
var drag_obj = null; |
var min_h = 10; // minimale Höhe |
var min_w = 10; // minimale Breite |
function mouseDownBody(ev){ |
setDragElement(ev); |
if( !drag_obj ) return ; |
document.onmousemove = mouseMoveBody; |
mouseMoveBody(ev) |
return false; |
} |
function mouseUpBody(ev) { |
if( drag_obj) drag_obj.style.cursor = 'move'; |
drag_obj = null; |
document.onmousemove = setDragElement; |
return false; |
} |
// Das Drag Element initialisieren |
function setDragElement(e) { |
if(!e) e = window.event; |
drag_obj = e.target || e.srcElement; |
while(drag_obj) { |
if( drag_obj.id && drag_obj.id.indexOf('img') != -1 ) break; |
drag_obj = drag_obj.parentNode; |
} |
var mouse = mouse_pos(e); |
if(drag_obj) { |
var p = get_rect(drag_obj); |
drag_obj.startLeft = p.left - mouse.left; |
drag_obj.startTop = p.top - mouse.top; |
drag_obj.startW = p.width; |
drag_obj.startH = p.height; |
drag_obj.mouseTop = mouse.top; |
drag_obj.mouseLeft = mouse.left; |
// berechne Cursor-Type; |
drag_obj.drittelX = Math.floor( ( mouse.left - p.left ) * 3 / p.width); |
drag_obj.drittelY = Math.floor( ( mouse.top - p.top ) * 3 / p.height) ; |
if(cursor[drag_obj.drittelY] && cursor[drag_obj.drittelY][drag_obj.drittelX] ) |
drag_obj.style['cursor'] = cursor[drag_obj.drittelY][drag_obj.drittelX]; |
} |
return mouse; |
} |
// Mausposition im Dokument bestimmen |
function mouse_pos(e) { |
if(!e) e = window.event; |
var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? |
window.document.documentElement : window.document.body || null; |
var mouse = { left:0, top:0 }; |
mouse.left = e.pageX ? e.pageX : e.clientX + body.scrollLeft; |
mouse.top = e.pageY ? e.pageY : e.clientY + body.scrollTop; |
return mouse; |
} |
var cursor = [ |
['nw-resize', 'n-resize', 'ne-resize'], |
['w-resize', 'move', 'e-resize'], |
['sw-resize', 's-resize', 'se-resize'], |
]; |
function mouseMoveBody(ev) { |
if(!drag_obj) return ; |
var m = mouse_pos(ev); |
var h = drag_obj.startH; |
var w = drag_obj.startW; |
var top = drag_obj.startTop; |
var left = drag_obj.startLeft; |
if( drag_obj.drittelY == 1 && drag_obj.drittelX == 1){ |
drag_obj.style.top = top + m.top + 'px'; |
drag_obj.style.left = left + m.left + 'px'; |
} |
if(drag_obj.drittelY == 0) { |
// Größe nach oben verändern |
h += drag_obj.mouseTop - m.top; |
if(h > min_h) drag_obj.style.top = top + m.top + 'px'; |
} else if(drag_obj.drittelY == 2) { |
// Größe nach unten verändern |
h -= drag_obj.mouseTop - m.top; |
} |
if(drag_obj.drittelX == 0){ |
// Größe nach links verändern |
w += drag_obj.mouseLeft - m.left; |
if(w > min_w) drag_obj.style.left = left + m.left + 'px'; |
} else if(drag_obj.drittelX == 2) { |
// Größe nach rechts verändern |
w -= drag_obj.mouseLeft - m.left; |
} |
if(h > min_h) drag_obj.style.height = h + 'px'; |
if(w > min_w) drag_obj.style.width = w + 'px'; |
return false; |
} |
function get_rect(o) { |
var rect = { |
left: 0, |
top: 0, |
height: o.offsetHeight, |
width: o.offsetWidth |
} |
while (o) { |
rect.top += parseInt(o.offsetTop ); |
rect.left += parseInt(o.offsetLeft ); |
o = o.offsetParent; |
} |
return rect; |
} |
document.onmousedown = mouseDownBody; |
document.onmouseup = mouseUpBody; |
document.onmousemove = setDragElement; |
Ähnliche Artikel
Comments (27)
13450 mal gelesen.
13450 mal gelesen.
27 Comments
Einen Kommentar hinterlassen »
Kommentare
« Zurück 1 2-
21.
von Struppi
-
-
22.
von Beat
-
-
23.
von Struppi
-
-
24.
von Beat
-
-
25.
von JürgenB
-
-
26.
von Beat
-
-
27.
von Struppi
-
« Zurück 1 2Montag 26.März 2012: 14:58
Ich hab' kein Windows mehr, aber unter Linux funktioniert es mit Opera, Firefox, Chromium und dem Webkit Browser. Insofern kann ich nicht sagen, warum es bei dir nicht funktioniert. Gibt es eine Fehlermeldung?
Montag 26.März 2012: 16:57
Das Bild verhaelt sich wie ein "normales" Bild. Die Maussymbole werden bei mouseover angezeigt, aber es wird keine Veraenderung ausgefuehrt. Haben noch andere dieses Problem_
Montag 26.März 2012: 17:07
Guck doch mal in die Fehlerkonsole, ich kann mir nicht vorstellen, dass es dort keine Meldung gibt
Montag 26.März 2012: 20:10
einig eine Warnung:
Das nodeValue-Attribut auf Attributen sollte nicht mehr verwendet werden. Verwenden Sie value stattdessen.
Der FF laeuft auf Vista und Parallels Desktop. Aber daran sollte es doch nicht liegen. Werde nochmal auf einem anderen System testen.
Montag 26.März 2012: 20:53
Hallo Struppi,
gerade im FF 11 unter Windows 7 getestet. Es funktioniert.
Gruß
Jürgen
Dienstag 27.März 2012: 07:18
Ich habe auf drei anderen Systemen getestet, dort funktioniert es problemlos. Pardon fuer die Aufregung. Bei mir haengt es allerdings weiterhin.
Dienstag 27.März 2012: 08:44
Wenn keine Meldung in der Fehlerkonsole steht und es bei allen anderen funktioniert, ist bei deinem System irgendetwas kaputt. Haste mal versucht mit Firebug zu debuggen?
Einen Kommentar hinterlassen