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; |
Comments (14)
7947 mal gelesen.
7947 mal gelesen.
14 Kommentare Einen Kommentar hinterlassen »
Kommentare
Mittwoch 18.Januar 2006: 17:28
naja, trotz Deines Tests mit Firefox funzt das Skript mit meiner fuchs nicht. Hab Version 1.5 vielleicht liegts daran - kann ich mir aber nicht vorstellen. Wenn Du weist warum, kannst Du mir ja bescheid geben.
Mittwoch 18.Januar 2006: 19:08
Kann ich nicht bestätigen, ich hab ebenfalls 1.5 und es klappt Problemlos. Übrigens auch im Opera 7 (mit kleinen Einschränkungen)
Mittwoch 20.Juni 2007: 16:59
Bei mir funktioniert es online, aber offline nicht..? Habe ich es wohl möglich nicht korekt eingebunden? Wie hast du es gemacht?
Freitag 22.Juni 2007: 19:26
Lag an ner lokalen sache, funktioniert jetzt soweit einwandfrei. Jedoch wird jedes element beim anklicken grundsätzlich sofort um nen px vergrössert, egal ob man es nun einfach anklickt, verschiebt, oder resized.
Freitag 22.Juni 2007: 21:01
Ok funktioniert nun einwandfrei, lag an ner unglücklichen css kombination
Sonntag 22.Juni 2008: 12:11
Wirklich genial - Herzlichen Dank!
Mittwoch 28.Januar 2009: 12:34
Klasse Script.
Ich hätte dazu aber eine frage.
Ist es auch möglich dieses Script auf ein Div anzuwenden?
Mittwoch 28.Januar 2009: 17:50
Ja, kein Problem, es muss nur positioniert sein
Mittwoch 4.Februar 2009: 11:50
Eine Frage zu dem Script hätte ich noch.
Wie muß das Script verändert werden, wenn ich nur die funktion zum größe-anpassen nutzen möchte. Ich versuche schon seit tagen dies zu lösen. Ich finde keinen einstieg.
Mittwoch 4.November 2009: 22:54
Hi,
Respekt !!!
ich würde gern die "nur" das Verschieben nutzen, und das Strecken abschalten.
Wie mache ich das ?
Donnerstag 5.November 2009: 13:40
Du meinst Drag&Drop?
http://javascript.jstruebig.de/javascript/67/
Freitag 14.Mai 2010: 17:07
Hi,
gelungene Sache, dieses Script. Ich arbeite zur Zeit auch an einer etwas speziellen Webanwendung. Es ist eine Navigation über eine Fläche durch bloßes Ziehen der Fläche, so wie man es google-maps gewohnt ist. Das Script funktioniert soweit, ich habe nur ein Problem: die "Fläche" wird durch Bilder aufgebaut. Wenn ich nun mit der Maus die Fläche greifen und ziehen will, kommt mir die Drag&Drop-Funktion des Browsers dazwischen; statt über mein Script die Fläche zu greifen, greife ich einzelne Bild. Auf diese Weise wird das Mausereignis immer wieder abgefangen und kann von meinem Script nicht richtig verarbeitet werden. Lässt sich das irgendwie vermeiden? Wieso kommt dir diese Funktion bei deinem Script nicht in die Quere? Ich wäre froh, wenn du mir helfen könntest...
Grüße, thomst
Samstag 15.Mai 2010: 10:20
ok. Ich habe mir dein Script noch mal genauer angeschaut und bin nun selbst drauf gekommen. Hat sich also erledigt. Jedenfalls besten Dank für das feine Script!
Samstag 15.Mai 2010: 12:40
In dem Skript hier, ist es das return false in den Mauseventfunktionen. Zusätzlich kann es notwendig sein, ein event.preventDefault() aufzurufen.
Einen Kommentar hinterlassen