CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 27 07:00:15

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

LIBRAIRIE DE DRAG AND DROP

Information sur la source

Note :

9,22 / 10

Catégorie :Effets Classé sous :draganddrop, déplacement, souris, position Niveau :Débutant Date de création :20/02/2007 Vu :15 741

Auteur : mickaelpfr

Ecrire un message privé

Commentaire sur cette source (28)

Ajouter un commentaire et/ou une note

Description

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

<!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>

<!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

Sources du même auteur

BOITE DE DIALOGUE DE VALIDATION MODAL

BULLE D'AIDE COMPATIBLE IE ET MOZILLA

GÉNÉRATEUR DE CSS (HÉBAUCHE)

Toutes les sources de mickaelpfr

Sources de la même categorie

BOUTON ROTATIF par kazma

SHOWMAPAREA par phidelum

DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev

ANIMATION DU TEXTE par brennal

EFFET RAYONS DU SOLEIL par tefa24600

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

COULEUR DE FOND SELON POSITION SOURIS par mailliam

DESSINER DES POLYGONES AVEC LA SOURIS par sebcap26

"DRAG" DE BLOC <DIV> par slog9

PROTOTYPE DE DRAG'N DROP par FasteX_

TAILLES ET POSITIONS DES OBJETS par bultez

Commentaires et avis

Commentaire de groovy le 21/02/2007 08:48:05

Très bon code, simple et propre.

Commentaire de ImmortalPC le 21/02/2007 13:33:53

Salut,

10/10
Rien à dire, c' est parfait ;-)

@+

Commentaire de scorpion le 21/02/2007 14:14:24

Très joli code. Bravo

Commentaire de mickaelpfr le 21/02/2007 17:24:35

Heureux que cela plaise, si quelqu'un a besoins d'aide pour implémenter une fonction au moment ou l'on relache l'élément ou autre , n'hésitez pas à laisser un message ici

Commentaire de PetoleTeam le 23/02/2007 17:54:26

Bonjour,
Code clair, ce qui n'est pas tout le temps le cas, et résultat sympa.
Deux petits reproches quand même, mais petit petit

1/ Pourquoi ne pas gérer le zIndex des objets afin que celui cliqué passe au premier plan
2/ Pourquoi ne pas avoir crée une fonction Ajoute_Event afin de rajouter au onload de window la fonction init_evenement, tu l'a portant bien fait pour document onmousexxx, cela permettrait d'avoir autre chose sur le onload comme c'est souvent le cas.

Bonne Continuation
;0)

Commentaire de mickaelpfr le 23/02/2007 18:39:24

Bonjour :)

1 ) effectivement , on pourrais affecter un z-index temporaire a l'élément déplacé et lui rendre quand on lache la souris :)

2 ) pour l'ajout d'une fonction de type "Ajoute_Event", cela poserait problème, car par exemple les évènements de la souris sont gèrés via le document , alors que le fait d'appeler une fonction au chargement de la page se fait par la fenètre ( window ) , une tel fonction aurait donc été plutot contraignante à gèrer.
par contre oui il serait possible de créer une collection d'évènement mais je pense que par rapport à la source, on la rendrait plus complexe pour pas grand chose ;)

Commentaire de rubiks10 le 23/02/2007 20:44:03

Salut

Le code est certes bien fait mais dans ton titre tu parles de DRAG AND DROP !! ta librairie ne permet que de faire du DRAG mais pas du DROP c'est à dire de pouvoir définir des éléments qui peuvent recevoir des éléments draggables comme par exemple de faire un panier en drag ans drop en déplaçant des objets sur un autre objet.

Donc il faudrait que tu changes le titre de ta librairie ou alors que tu implémentes l'option du drop.

Voilà mais sinon pour le drag c'est bien fait.

Commentaire de mickaelpfr le 23/02/2007 21:07:35

il est vrai ... bon la semaine prochaine je vous pond, la fonction de drop ... mais je ne fais pas le café ;)

Commentaire de stfou le 25/02/2007 16:07:28

Super code, clair et utile. J'avais moi-même essaye de faire du drag and drop sur une page, mais sans un resultat aussi propre que le tien. 10/10

Commentaire de PetoleTeam le 27/02/2007 19:14:50

Bonjour,
en créant une fonction d'ajout d'événement du type

function Add_Event( obj_, event_, func_, mode_){
  if( obj_.addEventListener)
    obj_.addEventListener( event_, func_, mode_? mode_:false);
  else
    obj_.attachEvent( 'on'+event_, func_);
}

il suffit d'écrire ligne 122
  Add_Event( window, 'load', init_evenement);

et la fonction init_evenement ressemble à cela
function init_evenement(){
  Add_Event( document, 'mousedown', start);
  Add_Event( document, 'mousemove', drag);
  Add_Event( document, 'mouseup', drop);
}
;0)

Commentaire de mickaelpfr le 28/02/2007 09:16:57

Salut peloteam, vraiment pas mal :)
je mettrais la mise à jours et testerais sur plusieurs navigateur lorsque j'intègrerais une fonction de DROP plus évolué et permettant d'ajouter une action dans le même esprit que ta fonction de gestion d'évènements :)

( heu j'ai relus j'espère que tout le monde a compris ce que je viens d'écrire ;-) )

Commentaire de cedriclomb le 14/05/2007 09:08:53

Bonjour
Enorme, ce que je cherchais enfin un drag And drop compatible FF
10/10

Commentaire de mister_gom le 22/06/2007 15:11:14

Salut,
je tenais tout d'abord à te féliciter , le code est très clair, et c'est très compréhensif .
J'ai voulu quand à moi créer une classe div qui représente une div draggable ( on peut ensuite l'améliorer en prenant n'importe quel élèment .) mon soucis est que mon résultat est beaucoup moins rapide que le tiens, est-ce que quelqu'un à une idée ?

P.S. : Je pense que c'est parce que je ne récupére l'événement que au niveau de la div, alors que toi tu le fais au niveau du document .

[code]
function Div(id){
var div = document.getElementById(id);
var clicked = false;

div.onmousedown = function(event){
if(!event){
event = window.event;
}
positionXAtClick = event.clientX;
positionYAtClick = event.clientY;
positionXMyobjectClick = parseInt(this.offsetLeft);
positionYMyobjectClick = parseInt(this.offsetTop);
clicked = true;
}

div.onmousemove = function(event){
if(!event){
event = window.event;
}
if(clicked){
div.style.position = "absolute" ;
div.style.left = event.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
div.style.top = event.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
}
}

div.onmouseup = function(event){
if(!event){
event = window.event;
}
div.style.position = "absolute" ;
div.style.left = event.clientX + ( positionXMyobjectClick - positionXAtClick ) + "px";
div.style.top = event.clientY + ( positionYMyobjectClick - positionYAtClick ) + "px";
clicked = false;
}
}
[/code]

on peut l'insérer dans une page comme ça :

[code]

<!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 src="drag.js" type="text/javascript"></script>
<script type="text/javascript">
function init(){
rouge = new Div('rouge');
}
</script>
</head>
<body onload="init()">
<div class="boiterouge drag" id="rouge"></div>
</body>
</html>
[/code]

Commentaire de mickaelpfr le 23/06/2007 09:49:14

heu la a froid , je te test ça demain si ça peut attendre, sinon en regardant ton code et ce que tu veux faire , fait toi un tableau d'id ( car si tu veux déplacer d'autre div, qui n'ont pas la même class...
et utilise un test dans la fonction :
function getClassDrag(myObject){
...
  for(i=0;i<tableauId.length;i++) {
    if(tableauId[i] == myObject.id){
//Affectation de l'objet qui viens d'etre clické a l'élément qui va être déplacé
myObjectClick = myObject;
break;
}
  }
}

voila , ce qui te permettra d'avoir une liste d'élément dragable avec X class différente, je regarderais plus tard pourquoi le déplacement est plus lent :)

Commentaire de mister_gom le 23/06/2007 12:31:41

Merci pour la réponse aussi rapide !
en fait justement si on veut déplacer d'autre div (quelque soit leur classe ), il suffit d'instancier la fonction div() comme ça :
div1 = new Div('id_de_la_div1');
div2 = new Div('id_de_la_div2');
et ça marche .
Apres, ta fonction getClassDrag() est intéressante dans le cas où tu veux pouvoir dragger des div et que tu en a plusieurs, et que tu veux choisir lesquels dragger , pour vérifier que les élèments sont draggable (si dans une de leur class est "drag"), mais en fait , je pense que comme c'est nous qui choisissons avec l'id quel objet on veut déplacer, je vois pas trop l'utilitée en fait, mais je suis peut-être passé à côté de quelque chose :p

Commentaire de maxroucool le 17/07/2007 22:52:49

Salut,

ton code est tres bien, mais j'ai beau relire la fonction getClassDrag, je vois pas a quoi elle sert.
Tu peux me l'expliquer s'il te plais!

Merci bp!
+++

Commentaire de mickaelpfr le 18/07/2007 14:34:27

Salut :)
La fonction getClassDrag, permet de récupèrer toute les class d'un objet ( oui un objet peut avoir plusieur classes ;) )
et de vérifier si l'objet est de type classMove ( définit en paramètre ^^ ) pour être déplacé.
voila voila

Commentaire de maxroucool le 18/07/2007 15:20:57

OK, ben je comprenais pas car je ne savais pas qu'un objet pouvait avoir 2 classes!

Merci pour ta réponse!
+++

Commentaire de GoldPegasus le 23/01/2008 17:23:10

ton code est très claire un grand bravo :).
maintenant j'ai une question est t'il possible des placer l'élément dans une autre style deplacer une div qui ce trouve dans une cellule d'un tableau dans une autre ? merci par avance de ta réponse :)

Commentaire de mickaelpfr le 24/01/2008 11:59:50

la ça devient un peu plus complexe ;)
il faut pour cela détecter quelle cellule tu survoles puis créer une fonction qui recréer a l'identique la div que tu drag pour la recréer dans la cellule du tableau et enfin détruire la div dragé

Commentaire de GoldPegasus le 24/01/2008 16:23:51

en gros faire mumuse avec des fonctions DOM ?

Commentaire de mickaelpfr le 24/01/2008 17:27:51

Heu oui et non la copie de la div et prendra 3 lignes, l'ajout 1 seule
et en fait il te faudra assigner a chaque div ou céllule un id que tu récupèreras au survol :)
je ne sais pas si ça va passer mais un code que j'avais fait il reste qqs bugs :

<!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{
padding:5px;
background-color:#FFEEBF;
width:550px;
position:relative;
}
.boiteBleu li{
background-color:#C1D8E8;
width:120px;
border:1px solid #ccc;
list-style:none;
margin:5px;
float:left;
}
.boiterouge{
background-color:red;
width:150px;
height:150px;
}

.liTemp{
background-color:#ffffff;
width:120px;
border:1px dashed #F1CEC5;
list-style:none;
margin-bottom:5px;
}

.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;
//alert(monElement.nodeName);
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){
//dès le débug du drag on remplace l'objet courant par un temporaire
var objDest = document.getElementById('conteneur');
var noeudAvant = getNoeudBefore(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";
//On désactive la sélection pendant le drag and drop
document.getElementById('conteneur').focus();
//document.getElementById('conteneur').style.MozUserSelect ="none";

}
return false;
}

function drop(){
if(myObjectClick){
//On détruit la div temporaire et on la remplace par celle déplacé
var objDest = document.getElementById('conteneur');
var nodeClonning = myObjectClick.cloneNode(true);
var temp_li = document.getElementById('li_temp');
var liste_li = objDest.getElementsByTagName('li');
/*for(var i = 0 ; i < liste_li.length ; i++){
finale += liste_li[i].innerHTML + '<br />';
}*/
destroyElement(myObjectClick);
nodeClonning.removeAttribute('style');
nodeClonning.style.border = "1px solid red";
objDest.insertBefore(nodeClonning,temp_li);
destroyElement(temp_li);
//Pour palier un bug sous firefox, on empèche la sélection pendant le drag and drop
//document.getElementById('conteneur').style.MozUserSelect ="text";
}

myObjectClick = null;
movable = false;
positionXAtClick = null;
positionYAtClick = null;
positionXMyobjectClick = null;
positionYMyobjectClick = null;
return false;
}

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;
break;
}
}
}
}

function getNoeudBefore(myObjectClick2){

var conteneur = document.getElementById('conteneur');
with(conteneur){
var listeLi = getElementsByTagName('li');
for(var i = 0 ; i < listeLi.length ; i++){
var tTop = listeLi[i].offsetTop;
var tLeft = listeLi[i].offsetLeft;
var mTop = myObjectClick2.offsetTop;
var mLeft = myObjectClick2.offsetLeft;
if( ( mTop > tTop && mTop < (tTop+20)) &&( mLeft > tLeft && mLeft < (tLeft+60)) )
{
if(!document.getElementById('li_temp')){
createLiTemp(listeLi[i]);
break;
}
else{
destroyElement(document.getElementById('li_temp'));
createLiTemp(listeLi[i]);
break;
}

}
}
}
}

function createLiTemp(objToInsert){
var obj=document.createElement('li');
obj.setAttribute("id","li_temp");
//obj.setAttribute("class","liTemp");
//obj.setAttribute("className","liTemp");
obj.setAttribute("style","background-color:#ffffff");
obj.setAttribute("cssText","background-color:#ffffff");
//et la rapidos au lieu d'un texte node .. ()-:-)
obj.innerHTML = "nouvelle";
//On vérifit que l'on ne se trouve pas sur aucun élément
if(objToInsert){
objToInsert.parentNode.insertBefore(obj,objToInsert);
}
else{
document.getElementById('conteneur').appendChild(obj);
}
}

function destroyElement(objToDestroy){
//récupération du parent
var parentDuLi = objToDestroy.parentNode;
parentDuLi.removeChild(objToDestroy);
}

window.onload = init_evenement;
</script>

</head>

<body>
<ul class="boiteBleu" id='conteneur' >
<li class="drag" id="Alpha">Alpha</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li>Gama</li>
<li>Teta</li>
<li>Beta</li>
<li class="drag" style="border:1px dashed red;">Drag Me</li>
<br style="clear:both" />
</ul>
</body>
</html>

Commentaire de GoldPegasus le 25/01/2008 08:48:18

merci je voie le principe :) je vais me pencher dessus si je trouve un code fiable je le posterai.

Commentaire de raydenz le 24/03/2008 12:11:39

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?

Commentaire de squall76000 le 28/05/2008 17:04:31

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.

Commentaire de spachfr le 25/03/2009 10:31:27 6/10

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

Commentaire de mickaelpfr le 25/03/2009 10:38:27

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 ...

Commentaire de damien174 le 02/03/2012 11:47:14

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

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

position de la souris sur une image [ par golgoth ] Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr Modifier position de la souris [ par schub1015 ] Bonjour,j'aimerais savoir s'il est possible de modifier la position de la souris ?Merci pour vos réponses. Position de la souris [ par SDK_akira ] Bonjour ^^ Je cherche un moyen de recuperer la position de la souris en javascript, c'est possible ? (j'ai cherché mais je n'ai rien trouvé [DEPLACE]variable definie par la position de la souris [ par Ankaa1988 ] Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique variable definie par la position de la souris [ par Ankaa1988 ] Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique Position souris et frames [ par PlasTicGoat ] bonjour, J'ai une page web composée de 3 frames: - 1 principale - 1 bandeau en haut - 1 paneau à gauche Je voudrais savoir précis&#23 Position de la souris sur une image [ par REMqb ] Voila : comment obtenir la position X et Y de la souris quand elle est sur une image? Scrollbar et déplacement d'une image avec la souris [ par cepekinio ] Bonjour,Contexte : appli web J2EE (JSP/JVScript/java) .J'ai réaliser une sorte de visionneuse de document(au format jpg) et je viens d'implémenter une TextArea ou Select et position de la souris [ par 6BerYeti ] Bonjour,Je souhaite faire afficher une infobulle là où est le curseur (avec un offset) et à la déplacer qd la souris se déplace.J'ai à peu près tout c Connaître la position d'un input [ par kcin ] Salut à tous.Je vois de partout des codes permettant de connaître la position de la souris, mais existe t-il un code pour connaître la position d'un i

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

RE : CODE BUG JAVASCRIPT par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€
Creation d-un site vitrine avec MagentO
Budget : 2 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP