LIBRAIRIE DE DRAG AND DROP

Signaler
Messages postés
6
Date d'inscription
mardi 25 février 2003
Statut
Membre
Dernière intervention
21 février 2007
-
damien174
Messages postés
78
Date d'inscription
jeudi 4 janvier 2001
Statut
Membre
Dernière intervention
2 mars 2012
-
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.

https://codes-sources.commentcamarche.net/source/41557-librairie-de-drag-and-drop

damien174
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
mickaelpfr
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 ...
spachfr
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
squall76000
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.
raydenz
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?
GoldPegasus
Messages postés
66
Date d'inscription
lundi 29 novembre 2004
Statut
Membre
Dernière intervention
7 janvier 2010

merci je voie le principe :) je vais me pencher dessus si je trouve un code fiable je le posterai.
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
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 + '
';
}*/
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>

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

</html>
GoldPegasus
Messages postés
66
Date d'inscription
lundi 29 novembre 2004
Statut
Membre
Dernière intervention
7 janvier 2010

en gros faire mumuse avec des fonctions DOM ?
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
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é
GoldPegasus
Messages postés
66
Date d'inscription
lundi 29 novembre 2004
Statut
Membre
Dernière intervention
7 janvier 2010

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 :)
maxroucool
Messages postés
44
Date d'inscription
jeudi 20 novembre 2003
Statut
Membre
Dernière intervention
28 janvier 2013

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

Merci pour ta réponse!
+++
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
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
maxroucool
Messages postés
44
Date d'inscription
jeudi 20 novembre 2003
Statut
Membre
Dernière intervention
28 janvier 2013

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!
+++
mister_gom
Messages postés
3
Date d'inscription
samedi 26 août 2006
Statut
Membre
Dernière intervention
14 juillet 2008

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
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
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 :)
mister_gom
Messages postés
3
Date d'inscription
samedi 26 août 2006
Statut
Membre
Dernière intervention
14 juillet 2008

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 .

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


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


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




</html> 
cedriclomb
Messages postés
275
Date d'inscription
samedi 19 novembre 2005
Statut
Membre
Dernière intervention
27 avril 2010
1
Bonjour
Enorme, ce que je cherchais enfin un drag And drop compatible FF
10/10
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
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 ;-) )
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
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)
stfou
Messages postés
454
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
1
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
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
il est vrai ... bon la semaine prochaine je vous pond, la fonction de drop ... mais je ne fais pas le café ;)
rubiks10
Messages postés
224
Date d'inscription
lundi 19 décembre 2005
Statut
Membre
Dernière intervention
6 juin 2007
2
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.
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
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 ;)
PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
11
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)
mickaelpfr
Messages postés
197
Date d'inscription
mardi 18 février 2003
Statut
Membre
Dernière intervention
29 avril 2009
2
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
cs_scorpion
Messages postés
5
Date d'inscription
dimanche 20 janvier 2002
Statut
Membre
Dernière intervention
21 février 2007

Très joli code. Bravo
ImmortalPC
Messages postés
954
Date d'inscription
mardi 11 mai 2004
Statut
Membre
Dernière intervention
11 novembre 2008
2
Salut,

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

@+
cs_groovy
Messages postés
6
Date d'inscription
mardi 25 février 2003
Statut
Membre
Dernière intervention
21 février 2007

Très bon code, simple et propre.