Extension de l'API JavaScript 4 du RAID HTML5 - Présentation de glisser-déposer

Le glisser / drop est une fonctionnalité très courante. Vous pouvez saisir un objet et le faire glisser vers la zone que vous souhaitez placer. De nombreux Javascripts implémentent des fonctions connexes de la même manière, comme le composant DragandDrop de jQueryui. Dans HTML5, Drag Drop devient l'opération standard et tout élément le prend en charge. Parce que cette fonction est si courante, tous les navigateurs traditionnels prennent en charge cette opération.

C'est très simple. Modifiez simplement l'attribut de glisser d'un élément à Draggable, et cet élément prend en charge la traînée, comme indiqué ci-dessous:

<imgDraggable = "true" />

Pendant le processus de traînée, nous devons souvent passer des données logiques correspondantes pour terminer le processus de conversion. Ici, nous utilisons principalement l'objet DataTransfer pour le transfert de données. Jetons un coup d'œil à ses membres d'abord:

Membres de la méthode:

setData (format, données): attribuez les données traînées à l'objet Datatransfer.

FORMAT: un paramètre de chaîne qui spécifie le type de données en cours de traînée. Les valeurs de ce paramètre peuvent être du texte (type de texte) et de l'URL (type d'URL). Ce paramètre est indépendant du cas, donc le texte est le même que le texte.

Données: un paramètre de type variant qui spécifie les données traînées. Les données peuvent être du texte, du chemin d'image, de l'URL, etc.

Cette fonction a une valeur de retour de type booléen. Le vrai signifie que les données sont ajoutées avec succès au DataTransfer, et FAUX signifie qu'elle échoue. Si nécessaire, ce paramètre peut être utilisé pour décider si une logique doit être poursuivie.

GetData (format): Obtenez les données de glisser stockées dans DataTransfer.

Le format signifie la même chose que dans setData, et les valeurs peuvent être du texte (type de texte) et de l'URL (type d'URL).

ClearData (format): supprime les données du type spécifié.

En plus du texte (type de texte) et de l'URL (type d'URL) qui peuvent être spécifiés ci-dessus, le format ici peut également prendre les valeurs suivantes: fichier-fichier, élément HTML-HTML, image d'image.

Cette méthode peut être utilisée pour traiter sélectivement les types de données glissés.

Effectallowed: Définit ou obtient l'opération que les données de l'élément de source de données peuvent effectuer.

Le type d'attribut est une chaîne, et la plage de valeur est la suivante:

Données de copie de copie.

Données de liaison de liaison.

Données Move-Mobile

CopyLink - Copier ou lier les données, déterminées par l'objet cible.

CopyMove - Copier ou déplacer des données, déterminée par l'objet cible.

LinkMove - lier ou déplacer les données, déterminées par l'objet cible.

tous les opérations sont prises en charge.

Aucun drag n'est interdit.

Valeur par défaut non initialisée, adopte le comportement par défaut.

Notez qu'après le réglage de l'effet à rien, la gagulation est interdite, mais la forme de la souris montre toujours la forme d'un objet qui ne peut pas être traîné. Si vous souhaitez ne pas afficher cette forme de souris, vous devez définir la valeur de retour de la propriété de l'événement de l'événement de la fenêtre sur False.

Dropeffect: définit ou obtient des opérations autorisées sur la cible traînée et la forme de la souris associée.

Copie-la forme de la souris lorsqu'il apparaît comme copie;

Link-La souris est montrée comme la forme de la connexion;

Déplacement - La souris apparaît comme une forme en mouvement.

Aucun (par défaut) - La souris apparaît comme une forme sans traîner.

Effectallowed Spécifie les opérations prises en charge par la source de données, il est donc généralement spécifié dans l'événement Ondragstart. Dropeffect spécifie les actions prises en charge en faisant glisser la cible, elle est donc généralement utilisée dans des événements tels que l'ondrager, l'ondragover et l'ondrop sur la cible traînée.

Fichiers: Renvoie la liste des fichiers glissants FileList.

Types: une liste de types de données envoyées dans Ondragstart (données de glisser).

L'existence d'un objet DataTransfer permet de transmettre des données logiques entre la source de données traînée et l'élément cible. Habituellement, nous utilisons la méthode SetData pour fournir des données dans l'événement Ondragstart de l'élément de source de données, puis dans l'élément cible, nous utilisons la méthode GetData pour obtenir des données.

Ce qui suit est l'événement qui se produira lors de la traînée et de la chute. Fondamentalement, l'ordre de déclenchement des événements est l'ordre suivant:

DragStart: déclenché lorsque l'élément à glisser commence à glisser. Cet objet d'événement est l'élément traîné.

glisser: déclenché lors de la traînée d'un élément, cet objet d'événement est l'élément traîné.

DRAGENTER: déclenché lors de la traînée d'un élément dans l'élément cible. Cet objet d'événement est l'élément cible.

Dragover: déclenché lors de la traînée d'un élément pour se déplacer sur l'élément cible. Cet objet d'événement est l'élément cible.

DragLeave: déclenché lors de la traînée d'un élément de l'élément cible. Cet objet d'événement est l'élément cible.

Drop: déclenché lorsque l'élément traîné est placé dans l'élément cible. Cet objet d'événement est l'élément cible.

DRAGEND: déclenché après dépôt, qui est déclenché lorsque la traînée est terminée. Cet objet d'événement est un élément traîné.

Fondamentalement, l'événement du paramètre de l'événement passera dans des éléments connexes, qui peuvent être facilement modifiés. Ici, nous n'avons pas besoin de gérer chaque événement, nous n'avons généralement qu'à connecter quelques événements principaux.

Les paramètres passés de cet événement contiennent beaucoup d'informations, et vous pouvez facilement obtenir les éléments traînés (event.target); Vous pouvez définir les données traînées (event.datatransfer.setData); Vous pouvez donc facilement implémenter la logique derrière la traînée (bien sûr, vous pouvez également transmettre d'autres paramètres lorsque vous vous liez).

L'objet de l'événement ONDRAG est un élément de drag, et cet événement est généralement géré moins fréquemment. L'événement OnDragesenter se produit lors de la traînée dans l'élément actuel, l'événement Ondragleave se produit lors de la traînée hors de l'élément actuel, et l'événement Ondragover se produit lorsque vous faites glisser des mouvements dans l'élément actuel.

Une chose à noter ici est que par défaut, le navigateur interdit la suppression des éléments, donc pour que les éléments tombent, vous devez retourner false dans cette fonction ou appeler la méthode event.PreventDefault (). Comme indiqué dans l'exemple suivant.

Lorsque les données Draggables sont supprimées, l'événement DROP est déclenché. Une fois la goutte à se terminer, l'événement Dragend est déclenché et cet événement est utilisé relativement moins.

Jetons un coup d'œil à un exemple simple:

<! Doctypehtml>

<html>

<adal>

<ScriptType = "Text / JavaScript">

functionallowdrop (ev) {

ev.PreventDefault ();

}

functionDrag (ev) {

ev.datatransfer.setData ("texte", ev.target.id);

}

functiondrop (ev) {

vardata = ev.datatransfer.getData ("texte");

ev.target.appendChild (document.getElementById (données));

ev.PreventDefault ();

}

</cript>

</ head>

<body>

<divid = "div1" ondrop = "drop (event)" ondragover = "allowdrop (event)"> </div>

<imgid = "drag1" src = "img_logo.gif" draggable = "true" ondragstart = "drag (event)" width = "336" height = "69" />

</docy>

</html>

L'exemple ci-dessus a utilisé diverses méthodes et propriétés de Datatransfer. Jetons un coup d'œil à une autre application intéressante sur Internet: faites glisser et déposez une image sur la page Web, puis affichons-la sur la page Web. Cette application utilise la propriété de fichiers de DataTransfer.

<! Doctypehtml>

<html>

<adal>

<MetAcharSet = "UTF-8">

<Title> HTML5 Fichier glisser-déposer </TITAL>

<style>

#Section {Font-Family: "Georgia", "Microsoft Yahei", "Chinese Song";}

.Container {Affichage: Block en ligne; min-height: 200px; min-width: 360px; couleur: # f30; padding: 30px; border: 3pxsolid # ddd; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;}

.Preview {max-largeur: 360px;}

# files-list {position: absolu; en haut: 0; gauche: 500px;}

#List {largeur: 460px;}

# list.preview {max-width: 250px;}

#Listp {Color: # 888; Font-Size: 12px;}

# list.green {couleur: # 09c;}

</ style>

</ head>

<body>

<divid = "section">

<p> Faites glisser votre image dans le conteneur ci-dessous: </p>

<divid = "conteneur" class = "conteneur">

</div>

<divid = "files-list">

<p> Fichiers qui ont été traînés: </p>

<ulid = "list"> </ul>

</div>

</div>

<cript>

if (window.fileReader) {

varList = document.getElementById ('list'),

cnt = document.getElementById ('conteneur');

// juger si l'image est

functionImage (type) {

commutateur (type) {

Case'image / jpeg ':

cas'image / png ':

cas'image / gif ':

case'image / bmp ':

Case'image / jpg ':

RetourTrue;

défaut:

returnFalse;

}

}

// Gire la liste des fichiers glisser-déposer

functionhandlefileSelect (evt) {

evt.stoppropagation ();

evt.PreventDefault ();

varFiles = evt.datatransfer.files;

pour (vari = 0, f; f = fichiers [i]; i ++) {

vart = f.type? f.type: «n / a»,

lecteur = newFileReader (),

looks = fonction (f, img) {

list.innerhtml + = '<li> <strong>' + f.name + '</strong> (' + t +

') -' + f.size + 'bytes <p>' + img + '</p> </li>';

cnt.innerhtml = img;

},

isimg = isimage (t),

IMG;

// Traitement les images obtenues

if (isImg) {

reader.onload = (fonction (thefile) {

returnFunction (e) {

img = '<imgclass = "préview" src = "' + e.target.result + '" title = "' + thefile.name + '" />';

regarde (le fichier, img);

};

}) (f)

Reader.readasdataurl (f);

}autre{

img = '"o ((> ω <)) o", ce que vous avez envoyé n'est pas une image! ! ';;

regarde (f, img);

}

}

}

// gérer l'effet d'insertion et de glissement

FunctionHandledRager (EVT) {this.setAttribute ('Style', 'Border-Style: pointillé;');}

FunctionHandledRagLeave (evt) {this.setAttribute ('style', '');}

// Gérer les événements de traînée de fichiers pour éviter la redirection causée par les événements par défaut du navigateur

FunctionHandledRagover (evt) {

evt.stoppropagation ();

evt.PreventDefault ();

}

cnt.addeventListener ('dragaud', mandepredRager, false);

cnt.addeventListener ('dragover', mannedRagover, false);

cnt.addeventListener ('drop', mancheFileSelect, false);

cnt.addeventListener ('dragleave', mandeledragleave, false);

}autre{

document.getElementById ('section'). innerhtml = 'Votre navigateur ne le prend pas en charge, camarade de classe';

}

</cript>

</docy>

</html>

Dans cet exemple, l'API de lecture de fichiers dans HTML5 est utilisée: l'objet FileReader; Cet objet fournit la méthode asynchrone suivante pour la lecture des fichiers:

1.FileReader.readasbinaryString (FileBlob)

Lisez le fichier en mode binaire, l'attribut de résultat contiendra le format binaire d'un fichier

2.FileReader.Readastext (FileBlob, Opt_Encoding)

Lisez le fichier en mode texte. L'attribut de résultat contiendra le format de texte d'un fichier. Le paramètre de décodage par défaut est UTF-8.

3.FileReader.readasdataurl (fichier)

La lecture du fichier Résultat dans le formulaire URL contiendra le format DataURL d'un fichier (les images sont généralement de cette manière).

Lorsque le fichier est lu en utilisant la méthode ci-dessus, les événements suivants seront déclenchés:

onloadStart, onProgress, onabort, onerror, onload, onloadEnd

Ces événements sont très simples, il suffit de se connecter en cas de besoin. Voir l'exemple de code suivant:

functionStartRead () {

// obtient le point de valeur

varFile = document.getElementById ('fichier'). Files [0];

if (fichier) {

getastext (fichier);

}

}

functiongetastext (readFile) {

varreReder = newFileReader ();

// ReadFileIntomoryAsutf-16

Reader.readastext (readfile, "UTF-16");

// HandleProgress, Success, Anderrors

Reader.OnProgress = UpdateSprogress;

Reader.onLoad = chargé;

Reader.OnError = ErrorHandler;

}

FunctionUpDateProgress (evt) {

if (evt.lengthcompautable) {

//evt.Loadedandevt.TotalAreprogressEventProperties

varloaded = (evt.loaded / evt.total);

if (chargé <1) {

// augmente la longueur

//style.width=(LoDed*200)+"px ";

}

}

}

FunctionLoDed (evt) {

// Obtient ThereadFiledata

varFileString = evt.target.result;

// handleUtf-16FileDump

if (utils.regexp.ischinese (filestring)) {

// ChineseCharacters + NameValidation

}

autre{

// RunotherCharseTteTest

}

//xhr.send(filestring)

}

functionerrorHandler (evt) {

if (evt.target.error.name == "notreadablerr") {

// Le fichier ne pouvait pasberread

}

}

Permettez-moi de parler brièvement ici: le téléchargement de fichiers ordinaire utilise la méthode Window.Open, par exemple:

window.open ('http://aaa.bbbb.com/ccc.rar' ,'_blank')

Document officiel: http://www.w3schools.com/html5/

Un bon site Web de tutoriel: http://html5.phphube.com/html5/features/drapanddrop/

Aide MSDN: http://msdn.microsoft.com/en-us/library/ms535861(v=vs.85).aspx

Description détaillée du fichier glisser-déposer: http://www.html5rocks.com/zh/tutorials/file/dndfiles/

Faites glisser et téléchargez le fichier: http://www.chinaz.com/design/2010/0909/131984.shtml

Exemple complet de la glissement de fichiers et de la mise à jour du téléchargement: http://www.vevb.com/liaofeng/archive/2011/05/18/2049928.html

Exemple de téléchargement de fichiers: http://hi.baidu.com/guo_biru/item/2d7201c012b6debd0c0a7b05

Window.Open Guide: http://www.vevb.com/liulf/archive/2010/03/01/1675511.html

Paramètre Window.Open: http://www.koyoz.com/blog/?action=show&id=176