Librairie de drag and drop

Commenter

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

S'inscrire maintenant

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.

Du même auteur (mickaelpfr)