nicht angemeldet
Draggable Div auch mit Scrollbalken?
Hallo,
ich habe ein draggable Div gebaut.
Das Div ist auch wunderbar samt Inhalt verschiebbar, aber wenn der Inhalt zu groß wird und Scrollbalken erscheinen, dann kann ich zwar noch verschieben, aber die sind Scrollbalken unbrauchbar.
Was muss ich ändern, damit ich das Div weiterhin verschieben kann, aber auch die Scrollbalken verwenden?
//Das Objekt, das gerade bewegt wird.
var dragobjekt = null;
// Position, an der das Objekt angeklickt wurde.
var dragx = 0;
var dragy = 0;
// Mausposition
var posx = 0;
var posy = 0;
var dragoverobject = null;
function draginit() {
// Initialisierung der Überwachung der Events
document.onmousemove = drag;
document.onmouseup = dragstop;
}
function dragstart(element) {
//Wird aufgerufen, wenn ein Objekt bewegt werden soll.
dragobjekt = element;
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function dragstop() {
//Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
dragobjekt = null;
}
function drag(ereignis) {
//Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}
#hidden_helper, #hidden_helper2 {
position:absolute;
z-index:999;
background:#95c4ea;
color:#000;
padding:5px;
border: solid 1px #3399ff;
max-height:600px;
overflow:auto;
}
<body onload="draginit();">
<div id="hidden_helper" onmousedown="dragstart(this)">
Jede Menge Text, sowas wie:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
-
Hallo Klaus!
Was muss ich ändern, damit ich das Div weiterhin verschieben kann, aber auch die Scrollbalken verwenden?
Ich habe das mal in ein jsFiddle gepackt und sowohl im FF, als auch mit Chrome ausprobiert. In keinem der Browser konnte ich das von dir beschriebene Problem feststellen.
Gruß Gunther
-
Hi,
Ich habe das mal in ein jsFiddle gepackt und sowohl im FF, als auch mit Chrome ausprobiert. In keinem der Browser konnte ich das von dir beschriebene Problem feststellen.
Also in Chrome und Opera kann ich das Dragging nicht mehr stoppen, nachdem ich einmal den Scrollbalken (per Klick darauf) benutzt habe.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Hi!
Also in Chrome und Opera kann ich das Dragging nicht mehr stoppen, nachdem ich einmal den Scrollbalken (per Klick darauf) benutzt habe.
Ach so ..., jetzt verstehe ich erst das eigentliche Problem, wenn der OP dasselbe meint. ;-)
Per Rechtsklick und dann Linksklick wird man das Teil auch wieder los ...,
was aber natürlich zugegebenermaßen nicht gerade sehr "praktisch" ist.Offentsichtlich "greift" in diesen Browsern die dragstop Funktion nicht, wenn man auf die Scrollbuttons/ -leist klickt.
Gruß Gunther
-
Hallo Gunther,
auch in Deinem jsFiddle-Beispiel kann ich mit dem Firefox das Problem reproduzieren, immer wenn ich den Scroll-Balken bewegen möchte.
Wenn ich die beiden Hoch/Runter-Icons verwende, dann gehts.Klaus
-
Hallo Klaus,
auch in Deinem jsFiddle-Beispiel kann ich mit dem Firefox das Problem reproduzieren, immer wenn ich den Scroll-Balken bewegen möchte.
Wenn ich die beiden Hoch/Runter-Icons verwende, dann gehts.ja das ist wohl ein "allgemeines Problem" mit den Scrollbars. Auch bei jQuery-UI taucht genau dieselbe Problematik auf, und auch entsprechende Treffer einer Googlesuche zeigen, dass dem so ist.
Es gibt nur verschiedene "Workarounds" für dieses Problem besteht in der Verschachtelung zweier Divs, wobei das (äußere) Element jenes die Scrollbar(s) hat, selber nicht direkt 'draggable' sein darf, aber über die Drag-Funktion dann "verschoben" wird.
Ich habe den/die/das Fiddle mal upgedated. Das ist jetzt natürlich eine "quick'n dirty" Anpassung.
Gruß Gunther
-
Hallo Gunther,
Es gibt nur verschiedene "Workarounds" für dieses Problem besteht in der Verschachtelung zweier Divs, wobei das (äußere) Element jenes die Scrollbar(s) hat, selber nicht direkt 'draggable' sein darf, aber über die Drag-Funktion dann "verschoben" wird.
Ich habe den/die/das Fiddle mal upgedated. Das ist jetzt natürlich eine "quick'n dirty" Anpassung.
Ich habe den Workaround gemäß Deiner Idee eingebaut und er funktioniert soweit prima.
Ich habs dann noch ein wenig umgebaut, um es allgemeingültiger zu machen, damit ich die Javascript-Funktionen auslagern und wiederverwenden kann.Vielen Dank für die Hilfe!
Klaus
-
-
-
-
-