Librairie de drag and drop

Soyez le premier à donner votre avis sur cette source.

Snippet vu 18 439 fois - Téléchargée 20 fois

Contenu du snippet

Cette "librairie", permet de gèrer le déplacement de n'importe quel objet, j'ai joint quelques exemples au code source.

Le principe est simple :
définir une classe qui sera "dragable" et ensuite , l'ajouter sur les éléments que l'on souhaite déplacer.
on peut ajouter la classe à un élément qui a déja une classe exemple avec les div dans la source.

voila en espérant que cette petite source puisse aider certaines personne.

COMPATIBLE IE/FIREFOX

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>classe d'élement déplaçable</title>
<style type="text/css">
	.boiteBleu{
		background-color:#C1D8E8;
		width:300px;
		height:300px;
	}
	.boiterouge{
		background-color:red;
		width:150px;
		height:150px;
	}
	.drag{
		border:2px dashed #F1CEC5;
		cursor:move;
	}
</style>
<script type="text/javascript">
/*######################################
script permettant de rendre déplaçable
les éléments qui ont la classe définit
en paramètre
######################################*/

var classMove = "drag";
var myObjectClick = null;
var movable = false;
var positionXAtClick = null;
var positionYAtClick = null;
var positionXMyobjectClick = null;
var positionYMyobjectClick = null;

//Fonction permettant d'initialiser les listeners
function init_evenement(){
 //On commence par affecter une fonction à chaque évènement de la souris
	if(window.attachEvent){
		document.onmousedown = start;
		document.onmousemove = drag;
		document.onmouseup = drop;
	}
	else{
		document.addEventListener("mousedown",start, false); 
		document.addEventListener("mousemove",drag, false);
		document.addEventListener("mouseup",drop, false);
	}

}

//Fonction permettant de récupèrer l'objet sur lequel on a clické, et l'on récupère sa classe	
function start(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	//Détection de l'élément sur lequel on a clické
	monElement = (e.target)? e.target:e.srcElement;
	
	if(monElement)
	{
		//On appel la fonction permettant de récupèrer la classe de l'objet et assigner les variables
		 getClassDrag(monElement);
		 if(myObjectClick){
		 	positionXAtClick = e.clientX;
			positionYAtClick = e.clientY;
			positionXMyobjectClick = parseInt(myObjectClick.offsetLeft);
			positionYMyobjectClick = parseInt(myObjectClick.offsetTop);
			return false;
		 }	 
	}
}

function drag(e){
	//On initialise l'évènement s'il n'a aps été créé ( sous ie )
	if(!e){
		e = window.event;
	}
	
	//Si l'objet est déplaçable et qu'il existe
	if(movable && myObjectClick){
		myObjectClick.style.position = "absolute" ;
		//On récupère la position de la souris par rapport à l'objet
		myObjectClick.style.left = e.clientX + ( positionXMyobjectClick - positionXAtClick )   + "px";
		myObjectClick.style.top = e.clientY + ( positionYMyobjectClick - positionYAtClick )   + "px";
		return false;
	}
	
}

function drop(){
	myObjectClick = null;
	movable = false;
	positionXAtClick = null;
	positionYAtClick = null;
	positionXMyobjectClick = null;
	positionYMyobjectClick = null;
}

function getClassDrag(myObject){
	with(myObject){
		var x = className;
		listeClass = x.split(" ");
		//On parcours le tableau pour voir si l'objet est déplaçable
		for(var i = 0 ; i < listeClass.length ; i++){
			if(listeClass[i] == classMove){
				movable = true;
				myObjectClick = myObject;
			}
		}
		
	}
}

	
	window.onload = init_evenement;
</script>

</head>

<body>
<div class="boiteBleu drag"></div>
<div class="boiterouge drag"></div>
<div class="drag">et avec du contenu</div>
<div class="boiteBleu"></div>
<input type="text" class="drag" style="width:300px" />
</body>
</html>

Conclusion :


V 0.1

A voir également

Ajouter un commentaire

Commentaires

Messages postés
78
Date d'inscription
jeudi 4 janvier 2001
Statut
Membre
Dernière intervention
2 mars 2012

Bonjour

je cherche ce style de code, mais je voudrais récupérer les coordonnées de la nouvelle position du bloc pour le stocké par ex dans une base de données.

Comment je peux faire ?

Merci
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
Merci , je me permet de mettre un lien vers la dernière version :

http://www.developpez.net/forums/d633007/webmasters-developpement-web/communaute-developpement-web/contribuez/drag-and-drop-delimiteur/

mieux codée, et plus propre ...
Messages postés
1
Date d'inscription
lundi 28 janvier 2008
Statut
Membre
Dernière intervention
25 mars 2009

Très beau travail !!!
Je cherchais un drag and drop simple, j'ai trouvé l'exemple idéal. Reste à creuser le code pour l'adapter à mes besoins
10/10
Testé avec IE7 et FF 3 aucun pb
Messages postés
1
Date d'inscription
jeudi 22 février 2007
Statut
Membre
Dernière intervention
28 mai 2008

bonjour,
Code qui marche à merveille :D 11/10 même.
Merci beaucoup.
Je voulais juste savoir si il était possible de déplacer un tableau en faisant <table class="drag"...> ?
merci d'avance.
Messages postés
1
Date d'inscription
mercredi 18 février 2004
Statut
Membre
Dernière intervention
24 mars 2008

Bonjour,

Code parfait pour déplacer des éléments. 10/10
Qq'un aurait un code permettant de déplacer un element dans un panier?
Afficher les 28 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.