Drag n' Drop für HTML Elemente
Um Elemente einer Seite frei positionieren zu können braucht es eine Mischung auf Java-Script und Styling-Information mit CSS.
Dieses Beispiel ist in purem Java-Script ohne JQuery geschrieben!
Dieses Beispiel ist in purem Java-Script ohne JQuery geschrieben!
Styling
Das gewünschte Element muss über die Styling Information position: absolute; positioniert werden. Dies bewirkt, dass das Element vom Fluss des Dokumentes genommen und darüber positioniert wird. Mit den Richtungsangaben top, bottom, left und right kann das absolut positionierte Element im Rahmen des Viewports positioniert werden.
Java-Script
Wie gesagt ist Java-Script für die wenigsten Einsätze sinnvoll, da es oft andere, geeignetere Technologien gibt.
Zum Beispiel kann man mittels CSS-Eigenschaft position: absolute; (und den dazugehörigen Eigenschaften top, left, top, bottom) HTML-Elemente frei auf dem Viewport, ausserhalb des normalen Inhaltes der Seite positionieren. Die frei positionierten Elemente geben der Seite viel Schwung. Aber dennoch wirken sie zu statisch und unbeweglich. Man möchte also ein bisschen mehr Einfluss (Eigenheit) auf die Seite bringen und die Elemente umrangieren.
Java-Script kann hier perfekt eingesetzt werden um die Positionierungs CSS-Eigenschaften der Element mit jedem Maus-Klick anzupassen.
Zum Beispiel kann man mittels CSS-Eigenschaft position: absolute; (und den dazugehörigen Eigenschaften top, left, top, bottom) HTML-Elemente frei auf dem Viewport, ausserhalb des normalen Inhaltes der Seite positionieren. Die frei positionierten Elemente geben der Seite viel Schwung. Aber dennoch wirken sie zu statisch und unbeweglich. Man möchte also ein bisschen mehr Einfluss (Eigenheit) auf die Seite bringen und die Elemente umrangieren.
Java-Script kann hier perfekt eingesetzt werden um die Positionierungs CSS-Eigenschaften der Element mit jedem Maus-Klick anzupassen.
Code
<script type="text/javascript">
window.onload = function() {
/* Drag n' Drop Element definieren */
var elements = new Array(
document.getElementById('mandrake'),
document.getElementById('feather'),
document.getElementById('pergamentSmall'),
document.getElementById('sphere'),
document.getElementById('horn')
);
for(var i = 0; i < elements.length; ++i) {
if(elements[i] == null) continue;
/* Listener auf dem Element setzen */
elements[i].onmousedown = function(downEvent) {
grab(downEvent, this);
return false; // Keine browserspezifischen, weiteren Aktionen (vor allem für Firefox)
}
}
fixSearch();
}
/**
* Fixt das Verhalten, damit man die Suche in der Sphere benutzen kann.
*/
function fixSearch() {
/* Fokus auf in Suche bringen */
document.getElementById('search').onmousedown = function(downEvent) {
document.getElementById('sphere').onmousedown = null;
}
/* Listener wieder auf Sphere setzen */
document.getElementById('search').onmouseout = function(downEvent) {
document.getElementById('sphere').onmousedown = function(downEvent) {
grab(downEvent, this);
return false; // Keine browserspezifischen, weiteren Aktionen (vor allem für Firefox)
}
}
}
/**
* Bei Mausdruck auf Element
*
* @param event MouseEvent
* @param element Element das verschoben werden soll
*/
function grab(event, element) {
/* Bevor das Element verschoben wird muss die Position des Cursors innerhalb der Elementes klar sein */
var cursorXPositionInElement = getCursorXPositionInElement(event, element);
var cursorYPositionInElement = getCursorYPositionInElement(event, element);
document.onmousemove = function(moveEvent) {
elementPositioning(moveEvent, element, cursorXPositionInElement, cursorYPositionInElement);
return false; // Keine browserspezifischen, weiteren Aktionen (vor allem für IE)
}
document.onmouseup = drop;
}
/**
* Neupositionierung des Elements
*
* @param event MouseEvent
* @param element Element das verschoben werden soll
* @param cursorXPositionInElement X-Position des Cursors im Element
* @param cursorYPositionInElement Y-Position des Cursors im Element
*/
function elementPositioning(event, element, cursorXPositionInElement, cursorYPositionInElement) {
/* Element platzieren abzüglich der Cursorposition */
element.style.left = getCursorXPosition(event)-cursorXPositionInElement+'px';
element.style.top = getCursorYPosition(event)-cursorYPositionInElement+'px';
}
/**
* Beim Loslassen des Maustaste
*/
function drop() {
/* Verwirft alle Listener */
document.onmousemove = null;
document.onmouseup = null;
}
/**
* X-Position des Cursors im Element
*
* @param event MouseEvent
* @param element Element das verschoben werden soll
*/
function getCursorXPositionInElement(event, element) {
return getCursorXPosition(event)-getElementXPosition(element);
}
/**
* Y-Position des Cursors im Element
*
* @param event MouseEvent
* @param element Element das verschoben werden soll
*/
function getCursorYPositionInElement(event, element) {
return getCursorYPosition(event)-getElementYPosition(element);
}
/**
* X-Position des Cursors im Viewport
*
* @see window.event http://www.quirksmode.org/js/events_access.html
* @see pageX/clientX http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/index.html
*
* @param event MouseEvent
* @return X-Position des Cursors im Viewport
*/
function getCursorXPosition(event) {
if(!event) event = window.event;
return event.pageX ? event.pageX : event.clientX + window.document.body.scrollLeft;
}
/**
* Y-Position des Cursors im Viewport
*
* @see window.event http://www.quirksmode.org/js/events_access.html
* @see pageY/clientY http://evolt.org/article/Mission_Impossible_mouse_position/17/23335/index.html
*
* @param event MouseEvent
* @return Y-Position des Cursors im Viewport
*/
function getCursorYPosition(event) {
if(!event) event = window.event;
return event.pageY ? event.pageY : event.clientY + window.document.body.scrollTop;
}
/**
* X-Position des Elementes im Viewport
*
* @param element Element das verschoben werden soll
* @return X-Position des Elementes im Viewport
*/
function getElementXPosition(element) {
return element.offsetLeft;
}
/**
* Y-Position des Elementes im Viewport
*
* @param element Element das verschoben werden soll
* @return Y-Position des Elementes im Viewport
*/
function getElementYPosition(element) {
return element.offsetTop;
}
</script>