jQuery UI Draggable c'est bien,
mais ce n'est pas compatible mobile/tablette,
et je dois toujours ajouter du code pour passer l'élément cliqué au premier plan.

jQuery easyDrag va moins loin que jQuery UI, mais il est carrément plus facile à paramétrer et mieux adapté à une utilisation courante.

jQuery easyDrag, c'est un plugin :

- 10 fois plus léger que jQuery UI draggable
- entièrement compatible tablette/mobile grâce aux Touch Events
- qui affiche un curseur explicite au survol des éléments draggables
- sans aucune dépendance (ni CSS, ni image, juste un fichier javascript)
- qui permet de déplacer un élément cliquable sans perdre le click

et tout ça en une seule instruction Javascript, sans rien spécifier de particulier.

En option, comme avec jQuery UI Draggable, il est aussi possible de :

- contraindre le déplacement horizontalement ou verticalement
- contraindre le déplacement à l'intérieur d'une div
- spécifier une poignée de déplacement (un petit bout du grand bout qu'on déplace)
- de spécifier une fonction lors des événements du drag : start (mousedown) / drag (mousemove) / stop (mouseup)

Testé et approuvé sur Firefox, Safari, Opera, Chrome, IE 10, 9, 8, 7, 6, tablette Android, et iPhone.
Enjoy !

Paramètres avancés

La version 1.2 de Décembre 2017 ajoute de nouveaux paramètres optionnels, en plus de ceux exposés dans les exemples :

$('.montruc').easyDrag({
	cursor: 'move', // le curseur affiché au survol, mettre '' pour pas ne y toucher
	ontop: true, // si l'élément draggé doit venir au 1er plan ou pas
	clickable: true // si l'élément doit aussi être cliquable
});
	

Utilisation simple

$('#zone1 .box').easyDrag();

Blocs draggables, qui passent au premier plan lors du clic/touch, avec un curseur bien lisible au survol.

Poignées

$('#zone2 .box').easyDrag({'handle': 'h2'});

Les div de la classe 'box' sont déplaçables uniquement via les h2 qu'ils contiennent.

On indique un sélecteur - 'h2' et non $('h2') - que la fonction va chercher à l'intérieur de l'élément draggable.

Contrainte horizontale / verticale

$('#zone3 .box').easyDrag({'axis': 'x'});

'x' pour un déplacement horizontal, 'y' pour un déplacament vertical.

Contraindre dans une zone

$('#zone4 .box').easyDrag({'container': $('#zone4')});

Les .box ne pourront pas sortir de la div #zone3...

Evénements du drag

$('#zone5 .box').easyDrag({
	start: function(){ 
		// déclenché au mousedown
		$(this).css('background-color', randCoul()); 
	},
	drag: function(){ 
		// déclenché au mouse move
		$(this).find('span').html('Coords : '+$(this).offset().left+' / '+$(this).offset().top); 
	},		
	stop: function(){ 
		// déclenché au mouseup
		$(this).css('background-color', randCoul()); 
	}
});

3 événements sont proposés :
- start (au début du déplacement)
- drag (au cours du déplacement, dès que l'objet est bougé)
- stop (à la fin du déplacement, quand on relache l'objet)

Dans les fonctions correspondantes, $(this) désigne l'objet qu'on est en train de déplacer.

On peut par exemple récupérer ses coordonnées via offset()

Combiner plusieurs paramètres

$('#zone6 .box').easyDrag({
	'handle': 'h2',
	'container': $('#zone6'), // la div dont on ne sort pas
	'axis': 'y',
	start: function(){ 
		// déclenché au mousedown
		$(this).css('background-color', randCoul()); 
	},
	drag: function(){ 
		// déclenché au mouse move
		$(this).find('span').html('Coords : '+$(this).offset().left+' / '+$(this).offset().top); 
	},		
	stop: function(){ 
		// déclenché au mouseup
		$(this).css('background-color', randCoul()); 
	}
});