Hensikten med drag og drop er vel oftere at vi ønsker å plassere elementer inne i
andre elementer, snarere enn at vi drar rundt på et element med absolutt posisjon, som i eksempelet ovenfor.
var draggedElt=null;
function handleDragStart(e) {
draggedElt = this;
e.dataTransfer.effectAllowed = 'move';
e.dataTransfer.setData('text', 'theImage');
}
function handleDragOver(e) {
// Allow drop.
if (e.preventDefault) e.preventDefault();
return false;
}
function handleDrop(e) {
// Stops some browsers(FF+ ?) from redirecting.
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
if (draggedElt != this) {
this.appendChild(draggedElt);
draggedElt=null;
}
return false;
}
function initDrag(){
document.getElementById('theImage')
.addEventListener('dragstart', handleDragStart, false);
var boxes=document.querySelectorAll('.box');
[].forEach.call(boxes, function(box) {
box.addEventListener('drop', handleDrop, false);
box.addEventListener('dragover', handleDragOver, false);
box.addEventListener('drop', handleDrop, false);
});
}
Et problem som det er verdt å merke seg er at noen nettlesere har en tendens til å
bruke det flyttede element som kilde for redirigering (??). Se kommentar i koden over.
Et litt mer omfattende eksempel som gir tilbakemelding på hvilket element som dragges finner du her:
var receiver=null;
function handleFileDragOver(e) {
// Allow drop.
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
}
function handleFileDrop(e) {
// Stops some browsers(FF+ ?) from redirecting.
if (e.stopPropagation) e.stopPropagation();
if (e.preventDefault) e.preventDefault();
receiver.innerHTML='';
var files = e.dataTransfer.files;
var T='<ul>';
for (var ix = 0, f; f = files[ix]; ix++)
T+='<li>'+f.name+'</li>';
receiver.innerHTML=T+'</ul>';
}
function initFileDrag()
{
receiver=document.getElementById('receiver');
receiver.addEventListener('dragover', handleFileDragOver, false);
receiver.addEventListener('drop', handleFileDrop, false);
}
Hva kan vi gjøre med disse filene ?
Mozilla [4] har noen forslag, og du finner demoer på
HTML5 Rocks Tutorieals [5] .
