Drag and drop

Operatiunea de tip “drag and drop” din HTML5 este practic o versiune decodificata a ceea ce Microsoft a implementat in Internet Explorer cu multi ani in urma. Nu este o specificatie prea iubita si cu siguranta are deficiente. Insa un avantaj important este ca puteti sa usurati interactiunea dintre paginile web si sistemele de operare, prin faptul ca puteti sa plasati fisierele direct in browserele web si apoi sa folosit File Api pentru a citi datele despre fisiere,a le incarca si asa mai departe.

Sa luam un exemplu in care trebuie sa parcurgeti pasii necesari, cum ar fi anularea evenimentelor pentru ca evenimentu ondrop sa se declanseze. Odata ce fisierele sunt plasate pe acel element, folositi obiectul dataTransfer pe evenimentul drop pentru a le accesa.

var dropArea=document.getElementById(“drop-area”);

dropArea.dragenter=function(evt) {

evt.preventDefault();

evt.stopPropagation();

};

dropArea.dragover=function(evt) {

evt.preventDefault();

evt.stopPropagation();

};

dropArea.drop =function(evt) {

//access dropped files

var files=evt.dataTransfer.files;

evt.preventDefault();

evt.stopPropagation();

};

Leave a reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>