KOMPOOS.NL

drag & drop images

home » javascripts » image-effects » drag-drop-image.html

voorbeeld van de drag en drop procedure

drag & drop

uitleg van het "drag and drop" script

Op deze pagina staat de basis-versie van het drag & drop "gebeuren". Het enige wat het script doet is er voor zorgen dat (in dit geval) een afbeelding, met de muis, geselecteerd en versleept kan worden. Plaats de html code ergens in de body-sectie van jouw pagina en plaats het javascript zo laag als mogelijk (ook) in de body-sectie. Het script is foutloos volgens de strenge JSLint-norm en werkt geheel cross browser.

html code voor de drag/drop procedure


<p>
   <img src='drag-drop.jpg' class="drag_drop" height="220" width="190" 
   alt="drag & drop" title="verplaats mij met jouw muis" />
</p>

javascript van de drag & drop procedure


<script>
var is_ie = document.all ? true: false;
var drag_drop_css = ".drag_drop{position:relative}",
drag_drop_element = document.createElement("style");
drag_drop_element.type = "text/css";
if (drag_drop_element.styleSheet) {
    drag_drop_element.styleSheet.cssText = drag_drop_css;
} else {
    drag_drop_element.appendChild(document.createTextNode(drag_drop_css));
}
document.getElementsByTagName("head")[0].appendChild(drag_drop_element);
var strikt = document.getElementById && !document.all,
is_gedropt = false,
x,
y,
drag_x,
drag_y,
drag_object;
function drag_muis(e) {
   if (is_gedropt) {
        drag_object.style.left = strikt ? drag_x + e.clientX - x + "px": drag_x + event.clientX - x + "px";
        drag_object.style.top = strikt ? drag_y + e.clientY - y + "px": drag_y + event.clientY - y + "px";
        return false;
    }
}
function drop_muis(e) {
    is_gedropt = false;
    return false;
}
function muis_keuze(e) {
    if (is_ie) {
        if (event.x > document.documentElement.clientWidth) {
            return (false);
        }
        if (event.y > document.documentElement.clientHeight) {
            return (false);
        }
    }
    var drag_drop_object = strikt ? e.target: event.srcElement;
    var top_element = strikt ? "HTML": "BODY";
    while (drag_drop_object.tagName != top_element && drag_drop_object.className != "drag_drop") {
        drag_drop_object = strikt ? drag_drop_object.parentNode: drag_drop_object.parentElement;
    }
    if (drag_drop_object.className == "drag_drop") {
        is_gedropt = true;
        drag_object = drag_drop_object;
        drag_x = parseInt((drag_object.style.left + 0), 10);
        drag_y = parseInt((drag_object.style.top + 0), 10);
        x = strikt ? e.clientX: event.clientX;
        y = strikt ? e.clientY: event.clientY;
        document.onmousemove = drag_muis;
        return false;
    }
}
document.onmousedown = muis_keuze;
document.onmouseup = drop_muis;
</script>