Tragere și plasare

Exemplu de drag and drop

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] :

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ă

Elemente conexe

• Interfață grafică
• Sistem de operare

Alte proiecte

• Wikimedia Commons conține imagini sau alte fișiere pe Drag and drop

Portal IT

Portal de știință și tehnologie