Commentaires sur une source : 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
2 mars 2012 à 11:47

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
25 mars 2009 à 10:38

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
25 mars 2009 à 10:31

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
28 mai 2008 à 17:04

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
24 mars 2008 à 12:11

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
25 janv. 2008 à 08:48

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
24 janv. 2008 à 17:27

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
24 janv. 2008 à 16:23

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
24 janv. 2008 à 11:59

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
23 janv. 2008 à 17:23

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
18 juil. 2007 à 15:20

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
18 juil. 2007 à 14:34

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
17 juil. 2007 à 22:52

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
23 juin 2007 à 12:31

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
23 juin 2007 à 09:49

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
22 juin 2007 à 15:11

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
14 mai 2007 à 09:08

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
28 févr. 2007 à 09:16

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 17
27 févr. 2007 à 19:14

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 450 Date d'inscription samedi 16 avril 2005 Statut Membre Dernière intervention 18 avril 2007 3
25 févr. 2007 à 16:07

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
23 févr. 2007 à 21:07

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 3
23 févr. 2007 à 20:44

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
23 févr. 2007 à 18:39

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 17
23 févr. 2007 à 17:54

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
21 févr. 2007 à 17:24

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
21 févr. 2007 à 14:14

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
21 févr. 2007 à 13:33

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
21 févr. 2007 à 08:48

Très bon code, simple et propre.

LIBRAIRIE DE DRAG AND DROP

Votre réponse

Discussions similaires