KOMPOOS.NL

drag drop script - cross browser

home » javascripts » drag-drop.html

voorbeeld van de drag drop procedure

versleep mij (geen probleem)

versleep mij (met de muis)

versleep mij (voor de lol)

uitleg van de drag drop procedure

Alles wat je de class "drag_drop" geeft (op jouw pagina) zal zich gedragen zoals de drie div's die op deze pagina staan. Het kleine javascriptje hieronder spreekt voor zichzelf. Plaats het javascript zo laag als mogelijk in de body-sectie van de pagina, en gebruik de html-code als voorbeeld voor jouw eigen pagina. De stylesheet heb je niet echt nodig. Op deze pagina geeft die alleen maar een style aan de drie div's.

html voorbeeld code voor het drag & drop gebeuren


<div class="drag_drop">versleep mij (geen probleem)</div>
<div class="drag_drop">versleep mij (met de muis)</div>
<div class="drag_drop">versleep mij (voor de lol)</div>

stylesheet die op deze pagina gebruikt is


<style type="text/css">
        .drag_drop{
                border:2px solid #a65;
                padding:0.3em;
                margin-bottom:6px;
                position:relative;
                display:block;
                background:#030;
                color:#fb0;
                width:18em}
</style>

javascript voor de drag & drop procedure


<script>
/*global document: false */
/*global event: false */
var strict_browser = document.getElementById && !document.all,
    dragged_ = false,
    x, y, parse_links, parse_top, a_object;
function drag_het_object(e) {
    if (dragged_) {
        a_object.style.left = strict_browser ? parse_links + e.clientX - x + "px" : parse_links + event.clientX - x + "px";
        a_object.style.top = strict_browser ? parse_top + e.clientY - y + "px" : parse_top + event.clientY - y + "px";
        return false;
    }
}
function drop_object() {
    dragged_ = false;
    return false;
}
function kies_object(e) {
    var q_object = strict_browser ? e.target : event.srcElement;
    var top_element = strict_browser ? "HTML" : "BODY";
    while (q_object.tagName !== top_element && q_object.className !== "drag_drop") {
        q_object = strict_browser ? q_object.parentNode : q_object.parentElement;
    }
    if (q_object.className === "drag_drop") {
        dragged_ = true;
        a_object = q_object;
        parse_links = parseInt(a_object.style.left+0, 10);
        parse_top = parseInt(a_object.style.top+0, 10);
        x = strict_browser ? e.clientX : event.clientX;
        y = strict_browser ? e.clientY : event.clientY;
        document.onmousemove = drag_het_object;
        return false;
    }
}
document.onmousedown = kies_object;
document.onmouseup = drop_object;
</script>