Tarik dan Lepas File dengan Pemograman Javascript

Tarik dan Lepas file menggunakan javascript

Drag dan drop file menggunakan javascript, serta memunculkan informasi dimana crusor berada, apakah crusor sedang melakukan drag pada file ataukah crusor sedang melepaskan file itu,

Untuk script program javascript nya bisa di lihat di bawah ini

<html>
<head>
<script type="text/javascript">
var elemen;
var ofsetX;
var ofsetY;

function penanganMouseDown(e)
{
     if (!e) e = window.event;
     if (window.event)
     {
        elemen = e.srcElement;
        ofsetX = e.clientX - parseInt(elemen.style.left);
        ofsetY = e.clientY - parseInt(elemen.style.top);
     }
     else
     {
        elemen = e.target;
        ofsetX = e.pageX - parseInt(elemen.style.left);
        ofsetY = e.pageY - parseInt(elemen.style.top);
     }

     var info = document.getElementById("id_info");
     info.innerHTML = "Anda mengklik pada " + elemen.id;
}

document.onmousemove = function(e)
{
     if (!e) e = window.event;
     if (elemen)
     {
        if (window.event)
        {
           elemen.style.left = (e.clientX - ofsetX) + "px";
           elemen.style.top = (e.clientY - ofsetY) + "px";
        }
        else
        {
           elemen.style.left = (e.pageX - ofsetX) + "px";
           elemen.style.top = (e.pageY - ofsetY) + "px";
        }
     }
}

document.onmouseup = function(e)
{
     if (elemen)
     {
        var info = document.getElementById("id_info");
        info.innerHTML = "Anda melepas " + elemen.id;

        elemen = null;
     }
}
</script>
<title>Tarik dan Lepas file menggunakan javascript</title>
</head>
<body>
<div id="id_info">Info</div>

<div id="Y O P I "
     style="position: absolute; left:10px; top:40px; background-color: #009933; cursor: hand; color: #FFFFFF;"
     onmousedown="penanganMouseDown(event);" >Y O P I </div>
<div id="P A Y A K U M B U H"
     style="position: absolute; left:12px; top:69px; background-color: #009933; cursor: hand; color: #FFFFFF;"
     onmousedown="penanganMouseDown(event);" >P A Y A K U M B U H </div>
<div id="S U M B A R"
     style="position: absolute; left:10px; top:94px; background-color: #009900; cursor: hand; color: #FFFFFF;"
     onmousedown="penanganMouseDown(event);" >S U M B A R </div>
</body>
</html>

Script di atas di buat menggunakan dreamweaver dengan ekstensi html

Y O P I

P A Y A K U M B U H

S U M B A R

Tarik dan Lepas File dengan Pemograman Javascript

{ 0 komentar... Views All / Send Comment! }

Posting Komentar

teman