Tragere și plasare
Drag and drop (tradus în italiană cu dragging ) [1] în lexiconul IT, indică o succesiune de trei acțiuni, constând în clic pe un obiect virtual (cum ar fi o fereastră sau o pictogramă ) pentru al trage (în engleză : drag ) într-o altă poziție, unde este eliberată (în engleză: drop ). În general, în limba italiană vine sau cu „click and drag”, chiar dacă traducerea literală este „drag and drop”.
fundal
A fost introdus pentru prima dată de Apple cu sistemul Macintosh 128K și ulterior a evoluat cu sistemul de operare System 7 .
Datorită HTML5 , drag and drop este acum disponibil nativ și în browserele care îl acceptă (în 2021 Opera 12, Mozilla Firefox 4, Safari , Google Chrome și, chiar dacă nu complet, Internet Explorer 9 și 10 [învechit] și Edge [2] ] ) printr-o interfață simplă JavaScript [3] .
Descriere
În general, acest tip de acțiune creează un fel de asociere între două obiecte: dacă, de exemplu, o pictogramă corespunzătoare unui document este trasă la coșul de gunoi , aceasta determină ștergerea documentului.
Adesea acțiunile de tragere și plasare corespund alternativelor prin tastatură ( comenzi rapide sau comenzi rapide ) sau prin comenzi text care trebuie introduse într-o consolă ; de exemplu, într-un sistem Microsoft Windows , mutarea unui fișier în coșul de reciclare corespunde apăsării tastei de ștergere.
Multe pluginuri Drag and Drop sunt disponibile pentru diferite CMS, inclusiv Wordpress [4] .
Exemplu
În HTML, un Drag and drop de bază poate fi creat după cum urmează [5] :
<! DOCTYPE HTML>
< html >
< cap >
< stil >
# div1 {
lățime : 350 px ;
înălțime : 70 px ;
căptușeală : 10 px ;
chenar : 1 px solid #aaaaaa ;
}
</ style >
< script >
funcție allowDrop ( ev ) {
ev . preventDefault ();
}
funcție drag ( ev ) {
ev . transfer de date . setData ( „text”, ev. target. id);
}
funcție drop ( ev ) {
ev . preventDefault ();
var date = ev . transfer de date . getData ( „text” );
ev . țintă . appendChild ( document . getElementById ( date ));
}
</ script >
</ head >
< corp >
< p > Trageți imaginea în dreptunghiul </ p >
< div id = "div1" ondrop = "drop (event)" ondragover = "allowDrop (event)" > </ div >
<Br>
<Img id = "drag1" src = "img_logo.gif" draggable = "true" ondragstart = "tragere (eveniment)" width = "336" height = "69">
</ body >
</ html >
HTML drag and drop folosește DOM event model
și drag events
moștenite de la mouse events
. În timpul operațiilor de tragere și plasare, sunt declanșate mai multe tipuri de evenimente JavaScript [6] :
Eveniment | Pe gestionarul de evenimente | Este activat când ... |
---|---|---|
drag | ondrag | … Un element (selecție de element sau text) este tras. |
dragend | ondragend | ... se termină o operație de tragere (cum ar fi eliberarea unui buton al mouse-ului sau a tastei Esc). |
dragenter | ondragenter | ... un element glisat introduce o țintă validă de fixare. |
dragexit | ondragexit | ... un element nu mai este ținta de selecție imediată a operației drag-and-drop. |
dragleave | ondragleave | ... un element glisat lasă o țintă de cădere validă. |
dragover | ondragover | ... un element glisat este glisat la o țintă validă la fiecare câteva sute de milisecunde. |
dragstart | ondragstart | ... utilizatorul începe să tragă un element. |
drop | ondrop | ... un articol este lansat pe o țintă de lansare validă. |
Exemplu de utilizare:
funcția dragstart_handler ( ev ) {
let img = new Image ();
img . src = 'exemplu.gif' ;
ev . transfer de date . setDragImage ( img , 10 , 10 );
}
Exemplu de formatare cu CSS [5] :
# drop_file_zone {
culoare de fundal : #EEE ;
chenar : # 999 5 px întrerupt ;
lățime : 290 px ;
înălțime : 200 px ;
căptușeală : 8 px ;
dimensiunea fontului : 18 px ;
}
# drag_upload_file {
lățime : 50 % ;
marja : 0 auto ;
}
# drag_upload_file # selectfile {
display : none ;
}
Exemplu de utilizator care încarcă un fișier pe un server prin PHP [7] :
<? php
$ arr_file_types = [ 'image / png' , 'image / gif' , 'image / jpg' , 'image / jpeg' ];
if ( ! ( in_array ( $ _FILES [ 'file' ] [ 'type' ], $ arr_file_types ))) {
ecou „fals” ;
întoarcere ;
}
if ( ! file_exists ( 'uploads' )) {
mkdir ( 'uploads' , 0777 );
}
move_uploaded_file ( $ _FILES [ 'file' ] [ 'tmp_name' ], 'uploads /' . time () . '_' . $ _FILES [ 'file' ] [ 'name' ]);
echo „Fișierul a fost încărcat cu succes”. ;
Notă
- ^ Exemple:
Glisați și fixați , pe informaticapertutti.com .
Trageți cu mouse-ul pe pcdazero.it .
Trageți folderele pe docs.alfresco.com . Adus la 31 martie 2020 (depus de „Adresa URL originală la 26 septembrie 2020).
Link către o pagină web de pe desktop la support.mozilla.org . - ^ Pot folosi ... Tabelele de asistență pentru HTML5, CSS3, etc , la caneuse.com . Adus la 17 februarie 2021 .
- ^ Glisare nativă ușoară cu HTML5 și JavaScript , pe html5today.it , HTML5 Today. Adus la 20 mai 2016 (Arhivat din original la 27 mai 2016) .
- ^ www.wpbeginner.com , https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/ . Adus la 17 februarie 2021 .
- ^ A b (EN) Folosind HTML5 Drag and Drop API , pe web.dev. Adus la 17 februarie 2021 .
- ^ Operații de tragere - API-uri web | MDN , la developer.mozilla.org . Adus la 17 februarie 2021 .
- ^ (EN) Sajid, Drag and Drop File Upload Using PHP and JavaScript , Web Artisans, 23 mai 2017. Accesat la 17 februarie 2021.
Elemente conexe
Alte proiecte
- Wikimedia Commons conține imagini sau alte fișiere pe Drag and drop