Skip to main content

Data transfer

Aquest és el cor de l'operació. Si els esdeveniments (dragstart, drop, etc.) són el "quan" passen les coses, l'objecte DataTransfer és el "què" i el "com". Imaginem el DataTransfer com el transport. Quan comences a arrossegar, es carreguen les dades. Mentre el mous, informa de quin tipus de càrrega porta i què se'n pot fer. Quan arribes al destí, descarregues les dades.

Gestió de dades (La càrrega)

Aquests mètodes permeten escriure, llegir i netejar la informació que volem moure.

setData(format, data)

  • Funció: Afegeix les dades que volem transportar. S'ha de cridar sempre al dragstart.

  • Formats comuns: 'text/plain', 'text/html', 'text/uri-list', 'application/json'.

  • Exemple:

    JavaScript 

    element.addEventListener('dragstart', (ev) => {
    // Guardem l'ID de l'element i també un text personalitzat
    ev.dataTransfer.setData('text/plain', ev.target.id);
    ev.dataTransfer.setData('text/html', '<b>Text en negreta</b>');
});

getData(format)

  • Funció: Recupera les dades emmagatzemades. Normalment es crida a l'esdeveniment drop.

  • Nota: Només pots accedir a les dades durant el drop. Si intentes fer un getData durant el dragover, et tornarà buit per seguretat.

  • Exemple:

    JavaScript 

    zonaDesti.addEventListener('drop', (ev) => {
    ev.preventDefault();
    // Recuperem només el format que ens interessa
    const id = ev.dataTransfer.getData('text/plain');
    console.log("Element deixat anar:", id);
});

clearData([format])

  • Funció: Esborra les dades. Si no s'especifica format, ho esborra tot.

  • Exemple:

    JavaScript 

    // Si per algun motiu volem cancel·lar l'enviament de dades al mig del procés
ev.dataTransfer.clearData();

Control d'accions

Aquestes propietats defineixen quina mena d'interacció estem fent (copiar, moure, enllaçar) i canvien el cursor del ratolí visualment.

effectAllowed

  • Qui ho defineix: L'element origen (al dragstart).

  • Funció: Diu "Jo permeto que em facin això".

  • Valors: none, copy, move, link, copyMove, copyLink, linkMove, all.

  • Exemple:

    JavaScript 

    element.addEventListener('dragstart', (ev) => {
    // Aquest element només es pot moure, no copiar
    ev.dataTransfer.effectAllowed = 'move'; 
});

dropEffect

  • Qui ho defineix: La zona de destí (al dragover).

  • Funció: Diu "D'acord, d'entre el que permets, aquí farem aquesta acció". Això canvia el cursor de l'usuari (fletxa normal, fletxa amb un +, etc.).

  • Valors: none, copy, move, link.

  • Exemple:

    JavaScript 

    zonaDesti.addEventListener('dragover', (ev) => {
    ev.preventDefault();
    // Encara que l'origen permeti 'all', aquí forcem que sigui una 'copy'
    // El cursor mostrarà un signe + verd (en la majoria de SO)
    ev.dataTransfer.dropEffect = 'copy'; 
});

Gestió d'arxius

files

  • Funció: Conté una llista (FileList) dels fitxers locals si l'usuari n'ha arrossegat des de l'escriptori del seu ordinador al navegador.

  • Exemple:

    JavaScript 

    zonaDrop.addEventListener('drop', (ev) => {
    ev.preventDefault();
    // Si hi ha fitxers...
    if (ev.dataTransfer.files.length > 0) {
        const fitxer = ev.dataTransfer.files[0];
        console.log(`Nom: ${fitxer.name}, Mida: ${fitxer.size} bytes`);
    }
});

Informació i metadades

types

  • Funció: Retorna un array amb els tipus de dades disponibles ("text/plain", "Files", etc.), però no les dades en si.

  • Ús: Molt útil al dragover o dragenter per saber si val la pena acceptar l'objecte abans que l'usuari el deixi anar.

  • Exemple:

    JavaScript 

    zonaDesti.addEventListener('dragover', (ev) => {
    // Només permetem deixar anar si és un fitxer
    if (ev.dataTransfer.types.includes("Files")) {
        ev.preventDefault(); // Permetem el drop
    } else {
        // Si és text o una altra cosa, no fem preventDefault(), 
        // per tant el drop estarà bloquejat.
    }
});

Feedback visual d'usuari

setDragImage(element, x, y)

  • Funció: Per defecte, el navegador crea una imatge semitransparent de l'element que arrossegues. Amb això pots posar una imatge personalitzada o un altre element HTML.

  • Paràmetres: L'element imatge i les coordenades (x, y) relatives al punter del ratolí.

  • Exemple:

    JavaScript 

    element.addEventListener('dragstart', (ev) => {
    const img = new Image();
    img.src = 'logo-petit.png';
    // El cursor estarà just al centre de la imatge (assumint 50x50)
    ev.dataTransfer.setDragImage(img, 25, 25);
});

Back to top