1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168
| <!DOCTYPE html>
<html>
<head>
<title>Le drag and drop avec HTML5 et jQuery</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
// ajoute la propriété pour le drop et le transfert de données
$.event.props.push('dataTransfer');
$(document).ready(function() {
var i, $this, $log = $('#log');
$('#liste li.liste').on({
// on commence le drag
dragstart: function(e) {
$this = $(this);
i = $(this).index();
$(this).css('opacity', '0.5');
// on garde le texte en mémoire
//e.dataTransfer.setData('text/html', $(this).text());
e.dataTransfer.setData('text/html', $(this).html());
},
// on passe sur un élément draggable
dragenter: function(e) {
// on augmente la taille pour montrer le draggable
$(this).animate({
width: '90px'
}, 'fast');
e.preventDefault();
},
// on quitte un élément draggable
dragleave: function() {
// on remet la taille par défaut
$(this).animate({
width: '75px'
}, 'fast');
},
// déclenché tant qu on a pas lâché l élément
dragover: function(e) {
e.preventDefault();
},
// on lâche l élément
drop: function(e) {
// si l élément sur lequel on drop n'est pas l'élément de départ
if (i !== $(this).index()) {
// on récupère le texte initial
var data = e.dataTransfer.getData('text/html');
// on log
$log.html(data + ' > ' + $(this).text()).fadeIn('slow').delay(1000).fadeOut();
// on met le nouveau texte à la place de l ancien et inversement
/*$this.text($(this).text());
$(this).text(data);*/
$this.html($(this).html());
$(this).html(data);
}
// on remet la taille par défaut
$(this).animate({
width: '75px'
}, 'fast');
},
// le drop est terminé, fin du drag
dragend: function() {
$(this).css('opacity', '1');
},
// au clic sur un élément
click: function() {
alert($(this).text());
}
});
$('#liste_D_1 li.D_1').on({
// on commence le drag
dragstart: function(e) {
$this = $(this);
i = $(this).index();
$(this).css('opacity', '0.5');
// on garde le texte en mémoire
//e.dataTransfer.setData('text/html', $(this).text());
e.dataTransfer.setData('text/html', $(this).html());
},
// on passe sur un élément draggable
dragenter: function(e) {
// on augmente la taille pour montrer le draggable
$(this).animate({
width: '90px'
}, 'fast');
e.preventDefault();
},
// on quitte un élément draggable
dragleave: function() {
// on remet la taille par défaut
$(this).animate({
width: '75px'
}, 'fast');
},
// déclenché tant qu on a pas lâché l élément
dragover: function(e) {
e.preventDefault();
},
// on lâche l élément
drop: function(e) {
// si l élément sur lequel on drop n'est pas l'élément de départ
if (i !== $(this).index()) {
// on récupère le texte initial
var data = e.dataTransfer.getData('text/html');
// on log
$log.html(data + ' > ' + $(this).text()).fadeIn('slow').delay(1000).fadeOut();
// on met le nouveau texte à la place de l ancien et inversement
/*$this.text($(this).text());
$(this).text(data);*/
$this.html($(this).html());
$(this).html(data);
}
// on remet la taille par défaut
$(this).animate({
width: '75px'
}, 'fast');
},
// le drop est terminé, fin du drag
dragend: function() {
$(this).css('opacity', '1');
},
// au clic sur un élément
click: function() {
alert($(this).text());
}
});
});
</script>
</head>
<body>
<h2>Le drag and drop avec HTML5 et jQuery</h2>
<ul id="liste">
<li class="liste" draggable="true">A</li>
<li class="liste" draggable="true">B</li>
<li class="liste" draggable="true">C</li>
<li draggable="true">D
<ul id="liste_D_1">
<li class="D_1" draggable="true">E</li>
<li class="D_1" draggable="true">F</li>
<li class="D_1" draggable="true">G</li>
</ul>
</li>
</ul>
<div id="log"></div>
</body>
</html> |
Partager