Dans la page Web, vous devez modifier la position de plusieurs éléments, qui peuvent être réalisés en faisant glisser l'élément. Un attribut global draggable est ajouté à HTML5, qui contrôle si l'élément peut être glissé en définissant True / Faux.
Prenons un glisser d'image comme exemple et utilisons jQuery pour l'implémenter: il y a plusieurs images sur la page, faites glisser une image au milieu des deux autres images, puis la position de cette image peut être insérée entre les deux images.
La copie de code est la suivante:
<! Doctype html>
<html>
<adal>
<style>
.img-div img {
Largeur: 200px;
hauteur: 200px;
flottant: à gauche;
}
.img-div {
flottant: à gauche;
}
.drop-left, .drop-droite {
Largeur: 50px;
hauteur: 200px;
flottant: à gauche;
}
</ style>
<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"> </ script>
<cript>
$ (document) .ready (function () {
// Div parent de l'image traînée
var $ srcimgDiv = null;
// commence à faire glisser
$ (". img-div img"). bind ("dragstart", function () {
$ srcimgDiv = $ (this) .parent ();
});
// Événements tirés lors de la traînée au-dessus .drop-left, .drop-droite
$ (". drop-left, .drop-droite"). bind ("dragover", fonction (événement) {
// Autoriser le glisser-déposer doit être défini via event.PreventDefault ()
event.PreventDefault ();
});
// terminer l'événement de traînée et de libération de la souris
$ (". drop-left"). bind ("drop", fonction (événement) {
event.PreventDefault ();
if ($ srcimgDiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). Avant ($ srcimgDiv);
}
});
$ (". Drop-droite"). Bind ("Drop", fonction (événement) {
event.PreventDefault ();
if ($ srcimgDiv [0]! = $ (this) .parent () [0]) {
$ (this) .parent (). After ($ srcimgDiv);
}
});
});
</cript>
</ head>
<body>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/38538/f/6864556.jpg" draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/6695960.jpg" draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/6683901.jpg" draggable = "true">
<div> </div>
</div>
<div>
<div> </div>
<img src = "http://photos.tuchong.com/349669/f/5121337.jpg" draggable = "true">
<div> </div>
</div>
</docy>
</html>
DragStart est l'événement qui commence à glisser l'élément, Dragover est l'événement qui traîne au-dessus de l'élément, et Drop est l'événement qui se termine et publie la souris.
draggable = "true" signifie que l'élément IMG peut être glisser, mais en fait, IMG est glisser par défaut, donc cette propriété peut également être supprimée. Si vous souhaitez faire glisser l'élément div, vous devez définir draggable = "true".
Les éléments div avec la classe Drop-Left et Drop-droite sont placés sur les côtés gauche et droit de l'image, et sont utilisés pour recevoir d'autres images et traîner vers cette position.