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

Ce site au démarrage

begin process at 2010 02 09 20:49:30

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 :12 652

Auteur : mickaelpfr

Ecrire un message privé

Commentaire sur cette source (27)

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

MOOTOOLTIP par Miky76

PAINTPIX (VERSION TESTE. EXPORTATION IMAGE POUR SITE WEB) par sitajony

FONCTION BLINK ( TESTÉE SOUS FF ) PORTABILITÉ IE OP ET GC EN... par xloadx

[DSI] DÉPLACEMENTS SUR IMAGES par Bul3

[ZI] ZOOM (LOUPE) SUR IMAGE par Bul3

Toutes les sources de la catégorie Effets

Sources en rapport avec celle ci

RAINBOW CURSOR par wackybacky

POSITION, OFFSETLEFT, CLIENTLEFT CROSSBROWSER par Kimjoa

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

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

TECHDAYS PARIS 2010 : LA BI DANS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : DéPLOIEMENT DE NOUVELLES TECHNOLOGIES - RETOUR D'EXPéRIENCE PAR L'INFORMATIQUE DE MICROSOFT par ROMELARD Fabrice

TECHDAYS PARIS 2010 : PLAN DE MIGRATION VERS SHAREPOINT 2010 par ROMELARD Fabrice

TECHDAYS PARIS 2010 : LA PLEINIèRE DU SECOND JOUR par ROMELARD Fabrice

VISUAL STUDIO 2010 AND .NET FRAMEWORK 4 RELEASE CANDIDATE NOW AVAILABLE par Matthieu MEZIL

Forum

RE : FONCTION RECHERCHE DATE par Eyeron

FONCTION RECHERCHE DATE par Eyeron

RE : RéCUPERER LA TAILLE D'UN DIV par PetoleTeam

RE : PROTOTYPE: PROBLèME AVEC "EVENT" par PetoleTeam

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

PLATEFORME SUR L ESOTERISME VOYANCE - sans charte graphique
Budget : 3 500€
Joomla 15 module paiement adaptation composant cuisine
Budget : 250€
Integrateur web dans template
Budget : 500€

Logiciels

DB-MAIN (9.1.0)
DB-MAIN (9.1.0)

DB-MAIN is a data-modeling and data-architecture tool. It is designed to help developers and anal...

Cliquez pour télécharger DB-MAIN
Xilisoft DPG Convertisseur (5.1.37.0120)
XILISOFT DPG CONVERTISSEUR (5.1.37.0120)

Xilisoft DPG Convertisseur offre aux fans de Nintendo DS une bonne solution leur permettant de dé...

Cliquez pour télécharger Xilisoft DPG Convertisseur
GraphicsGale (2.01.01)
GRAPHICSGALE (2.01.01)

GraphicsGale est un logiciel de PixelArt avec de nombreuse fonctionnalités permettant de réalisé ...

Cliquez pour télécharger GraphicsGale
Architecte 3D (Platinum 2010)
ARCHITECTE 3D (PLATINUM 2010)

Architecte 3D Platinium vous permet de concevoir facilement les plans votre future maison, de l'é...

Cliquez pour télécharger Architecte 3D
TeamViewer 5 (TeamViewer 5)
TEAMVIEWER 5 (TEAMVIEWER 5)

Dépanner un ami,expliquer une manipulation devient un jeu d'enfant. Prise en main d'un autre ord...

Cliquez pour télécharger TeamViewer 5