DRAG AND DROP, TIRÉ ET DÉPLACÉ DES IMAGES, SANS MODIFIER LES BALISES IMG +: OU E
LocalStone
Messages postés514Date d'inscriptionmercredi 19 mars 2003StatutMembreDernière intervention 1 mars 2009
-
25 août 2004 à 18:49
sonialand
Messages postés26Date d'inscriptionmardi 7 avril 2009StatutMembreDernière intervention12 août 2009
-
13 mai 2009 à 21:42
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
et 4 ans plus tard, ca marche plus pas de zip.... j'en ai marre de chercher...
tazzz28
Messages postés1Date d'inscriptionmercredi 11 septembre 2002StatutMembreDernière intervention 2 janvier 2008 2 janv. 2008 à 21:22
bonjour,
felicitations pour ce super script.
je souhaiterais savoir si il est possible de limiter les zones de deplacement
et également savoir si il est possible de generer une image resultant de la superposition avec le drag & drop
@+ et bonne année
zeratul67
Messages postés97Date d'inscriptionmardi 9 avril 2002StatutMembreDernière intervention11 mai 2008 28 juin 2007 à 10:21
Simple, claire, efficace. Exactement l'exemple que je recherchais.
Mes félicitations, bon code.
masternico
Messages postés487Date d'inscriptiondimanche 5 octobre 2003StatutMembreDernière intervention 1 septembre 2011 16 janv. 2007 à 10:27
Très bon code et facilement adaptable à mes besoins. Par contre, je confirme le bug raporté par 'paradoxxl' le 05/06/2005 (ça fait un bail), lorsque l'on fait un scroll de la page, cela désactive le drag&drop... quel est ce mystère? En attendant... je bloque le scroll sur ma page ;)
tchô tchô
8/10
shin_hermit
Messages postés2Date d'inscriptionlundi 27 novembre 2006StatutMembreDernière intervention 6 décembre 2006 27 nov. 2006 à 20:14
Très bon code. J'ai voulu faire quelques modifications pour passer des id quelconques en argument. Cela fonctionne toujours sous IE mais plus sous NN ni MF. Je ne sais pas pourquoi:
var cursorPosXStart,cursorPosYStart; // Position du curseur au départ du déplacement
var objPosLeftStart,objPosTopStart; // Position de l'objet au départ du déplacement
var elt = null; // contiendra la référence à l'objet cliqué
function trackEvent(eltId){ // écouteur des événements mousedown et mouseup
// Si l'objet est trouvé
if( (elt = findObj(eltId)) != null ){
// capture d'événènements appuyer, relacher
if( elt.captureEvents ){
// pour Nescape 4
elt.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
}
elt.onmousedown = startDrag;
elt.onmouseup = endDrag;
}
return false;
}
function startDrag(e){
// enregistrement de la position du curseur ; Si (netscape) ? vrai : faux;
cursorPosXStart (navigator.appName.substring(0,3) "Net") ? e.pageX : event.clientX;
cursorPosYStart (navigator.appName.substring(0,3) "Net") ? e.pageY : event.clientY;
// enregistrement de la position de l'image
objPosLeftStart=parseInt(elt.style.left);
objPosTopStart=parseInt(elt.style.top);
// capture de l'événènement déplacement du curseur
if (elt.captureEvents)
{ // pour Netscape 4
elt.captureEvents(Event.MOUSEMOVE);
}
elt.onmousemove= moveIt;
}
function moveIt(e){
// enregistrement de la position du curseur ; Si (netscape) ? vrai : faux;
var cursorPosX (navigator.appName.substring(0,3) "Net") ? e.pageX : event.clientX;
var cursorPosY (navigator.appName.substring(0,3) "Net") ? e.pageY : event.clientY;
// déplacement de l'image
elt.style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
elt.style.top=objPosTopStart+cursorPosY-cursorPosYStart;
return false; // si elt.onmousemove est mis à true => le mvt a tendance à continuer après mouseup
}
function endDrag(e){
// Arret de la capture de l'événènement déplacement du curseur
if (elt.captureEvents)
{ // pour Netscape 4
elt.releaseEvents(Event.MOUSEMOVE);
}
elt.onmousemove= "";
/* suppression de la référence de l'objet
elt = null;*/
}
function findObj(name, document_ref) { //v4.01
var p, i, theObjRef;
if(!document_ref) document_ref = document;
if( (p=name.indexOf("?")) > 0 && parent.frames.length ) {
document_ref = parent.frames[name.substring(p+1)].document;
name = name.substring(0,p);
}
if( !(theObjRef = document_ref[name]) && document_ref.all ){
theObjRef = document_ref.all[name]; // exemple: cas des div
}
for ( i=0; !theObjRef && i < document_ref.forms.length; i++ ){
theObjRef = document_ref.forms[i][name];
}
for(i=0; !theObjRef && document_ref.layers && i < document_ref.layers.length; i++ ){
theObjRef = findObj(name,document_ref.layers[i].document);
}
if( !theObjRef && document_ref.getElementById ){
theObjRef = document_ref.getElementById(name);
}
return theObjRef;
}
younes371
Messages postés502Date d'inscriptionmercredi 29 décembre 2004StatutMembreDernière intervention20 mars 2012 20 sept. 2006 à 18:37
Bonjour,
Je travail sur un projet de fin d'étude ,oû je dois mettre des drag and drop, le meme que www.netvibes.com ou www.google.com/ig
Si vous pouvez m'aider et m'envoyer le script ça serait gentil de votre part .
aussi je me suis inspiré http://tool-man.org/examples/sorting.html mais ça reste un peu flou.
Aussi j'aimerai bien faire la creation de nouvel onglet comme sur www.netvibes.com ' nouvel onglet ' . merci d avance les amis
Merci
cs_metis15
Messages postés314Date d'inscriptionlundi 19 mai 2003StatutMembreDernière intervention30 novembre 2023 6 oct. 2005 à 14:26
Je suis émerveillé par tant de connaissance !!
Cependant, ça ne marche pas sous Mozilla-FireFox chez moi.
Normal ??
paradoxxl
Messages postés22Date d'inscriptiondimanche 7 novembre 2004StatutMembreDernière intervention27 mai 2016 5 juin 2005 à 00:47
salut à tous,
alors felicitation pour ton code mais quelques remarques: un leger bug, au premier clique (onmousedown) tout les elements se retrouvenet à syle.left 0 et style.top 0, conportement des navigateurs differents d'il y a qqs mois ??
sinon, pour IE, lorsque l'on deplace un element (je parle toujours de la 2eme version avec les div) tout en bas et si commence à faire un scrolldow, le drag'n drop ne fonctionne plus... (il fonctionne toujours sous FF)..
voila merci encore pour ce code clair bien commenté c'est vrai.
a+
vbbreizh
Messages postés73Date d'inscriptionlundi 25 juin 2001StatutMembreDernière intervention13 novembre 20051 20 nov. 2004 à 15:35
Du joli boulot qui m'a permis de rendre compatible ie/nn un petit jeu de scrabble récemment édité sur ce site.
J'ai associé des pièces de ton code au mien et le résultat est assez sympa. J'espère même en faire un petit Dhtml/JS sur le drag and drop un de ces jours...
Cordial kenevo !
Juste une petite améliration :
placer ces 2 évènement dans une fonction serait plus propre si un browser avait sa propre méthode, il suffirait juste de modifier la fonction.
// enregistrement de la position du curseur ; Si (netscape) ? vrai : faux;
var cursorPosX (navigator.appName.substring(0,3) "Net") ? e.pageX : event.clientX;
var cursorPosY (navigator.appName.substring(0,3) "Net") ? e.pageY : event.clientY;
C'est incroyable, c'est exactement ce que je cherchais sans imaginer que ca puisse exister !
En plus la programmation est claire, intuitive et bien commentée.
Un grand bravo !
flashfun
Messages postés296Date d'inscriptionmercredi 10 septembre 2003StatutMembreDernière intervention11 septembre 2004 8 sept. 2004 à 17:55
jotrash
Messages postés373Date d'inscriptionmardi 31 décembre 2002StatutMembreDernière intervention19 juin 2007 8 sept. 2004 à 12:32
franchement bravo pour ce code qui ouvre vraiment beaucoup de possibilites aux pages web et tout cela tres simplement!! si par contre tu pouvais un peu plus commenter tes sources ca serait gentil car on y comprends pas grands chose quand on est debutant ou aupremier abord voila bravo <à++@
cs_frop01
Messages postés1352Date d'inscriptionlundi 27 octobre 2003StatutMembreDernière intervention19 novembre 20082 27 août 2004 à 23:25
Suuuuper intérréssant ce code!
J'ai rien compris du code mais c'est l'idéal pour se ressourcer.
En attendant les commentaires, je te donne 10/10
Merci flashfun.
flashfun
Messages postés296Date d'inscriptionmercredi 10 septembre 2003StatutMembreDernière intervention11 septembre 2004 25 août 2004 à 21:29
Merci LocalStone.
Ce programme fonctionne sur tous les navigateurs (normalement ;o).
Si on remplace tous les "document.images" par "document.elements", tous les éléments (sans exceptions) de la page deviennent Drag and Drop.
J'ai peur que si il y a trop d'élements le programme ralentisse à cause de la recherche de l'élément cliqué.
Je viens de faire une version qui se base sur le nom des
IDs :
LocalStone
Messages postés514Date d'inscriptionmercredi 19 mars 2003StatutMembreDernière intervention 1 mars 2009 25 août 2004 à 18:49
C'est super. Serieux, ça fonctionne super bien (avec IE, en tout cas) et franchement, tu devrais adapter ça pour les DIV par exemple, ou pour d'autres balises. En tout cas, je vais bien étudier ta source parce qu'en tout cas, le déplacement est super fluide et tout et voilà.
10/10 !
LocalStone
13 mai 2009 à 21:42
tres bien le code! moi aussi je veux bien savoir comment faire pour limiter les zones de deplacement, surtout en haut et en bas
4 mai 2008 à 11:46
2 janv. 2008 à 21:22
felicitations pour ce super script.
je souhaiterais savoir si il est possible de limiter les zones de deplacement
et également savoir si il est possible de generer une image resultant de la superposition avec le drag & drop
@+ et bonne année
28 juin 2007 à 10:21
Mes félicitations, bon code.
16 janv. 2007 à 10:27
tchô tchô
8/10
27 nov. 2006 à 20:14
var cursorPosXStart,cursorPosYStart; // Position du curseur au départ du déplacement
var objPosLeftStart,objPosTopStart; // Position de l'objet au départ du déplacement
var elt = null; // contiendra la référence à l'objet cliqué
function trackEvent(eltId){ // écouteur des événements mousedown et mouseup
// Si l'objet est trouvé
if( (elt = findObj(eltId)) != null ){
// capture d'événènements appuyer, relacher
if( elt.captureEvents ){
// pour Nescape 4
elt.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
}
elt.onmousedown = startDrag;
elt.onmouseup = endDrag;
}
return false;
}
function startDrag(e){
// enregistrement de la position du curseur ; Si (netscape) ? vrai : faux;
cursorPosXStart (navigator.appName.substring(0,3) "Net") ? e.pageX : event.clientX;
cursorPosYStart (navigator.appName.substring(0,3) "Net") ? e.pageY : event.clientY;
// enregistrement de la position de l'image
objPosLeftStart=parseInt(elt.style.left);
objPosTopStart=parseInt(elt.style.top);
// capture de l'événènement déplacement du curseur
if (elt.captureEvents)
{ // pour Netscape 4
elt.captureEvents(Event.MOUSEMOVE);
}
elt.onmousemove= moveIt;
}
function moveIt(e){
// enregistrement de la position du curseur ; Si (netscape) ? vrai : faux;
var cursorPosX (navigator.appName.substring(0,3) "Net") ? e.pageX : event.clientX;
var cursorPosY (navigator.appName.substring(0,3) "Net") ? e.pageY : event.clientY;
// déplacement de l'image
elt.style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
elt.style.top=objPosTopStart+cursorPosY-cursorPosYStart;
return false; // si elt.onmousemove est mis à true => le mvt a tendance à continuer après mouseup
}
function endDrag(e){
// Arret de la capture de l'événènement déplacement du curseur
if (elt.captureEvents)
{ // pour Netscape 4
elt.releaseEvents(Event.MOUSEMOVE);
}
elt.onmousemove= "";
/* suppression de la référence de l'objet
elt = null;*/
}
function findObj(name, document_ref) { //v4.01
var p, i, theObjRef;
if(!document_ref) document_ref = document;
if( (p=name.indexOf("?")) > 0 && parent.frames.length ) {
document_ref = parent.frames[name.substring(p+1)].document;
name = name.substring(0,p);
}
if( !(theObjRef = document_ref[name]) && document_ref.all ){
theObjRef = document_ref.all[name]; // exemple: cas des div
}
for ( i=0; !theObjRef && i < document_ref.forms.length; i++ ){
theObjRef = document_ref.forms[i][name];
}
for(i=0; !theObjRef && document_ref.layers && i < document_ref.layers.length; i++ ){
theObjRef = findObj(name,document_ref.layers[i].document);
}
if( !theObjRef && document_ref.getElementById ){
theObjRef = document_ref.getElementById(name);
}
return theObjRef;
}
20 sept. 2006 à 18:37
Je travail sur un projet de fin d'étude ,oû je dois mettre des drag and drop, le meme que www.netvibes.com ou www.google.com/ig
Si vous pouvez m'aider et m'envoyer le script ça serait gentil de votre part .
aussi je me suis inspiré http://tool-man.org/examples/sorting.html mais ça reste un peu flou.
Aussi j'aimerai bien faire la creation de nouvel onglet comme sur www.netvibes.com ' nouvel onglet ' . merci d avance les amis
Merci
6 oct. 2005 à 14:26
Cependant, ça ne marche pas sous Mozilla-FireFox chez moi.
Normal ??
5 juin 2005 à 00:47
alors felicitation pour ton code mais quelques remarques: un leger bug, au premier clique (onmousedown) tout les elements se retrouvenet à syle.left 0 et style.top 0, conportement des navigateurs differents d'il y a qqs mois ??
sinon, pour IE, lorsque l'on deplace un element (je parle toujours de la 2eme version avec les div) tout en bas et si commence à faire un scrolldow, le drag'n drop ne fonctionne plus... (il fonctionne toujours sous FF)..
voila merci encore pour ce code clair bien commenté c'est vrai.
a+
20 nov. 2004 à 15:35
J'ai associé des pièces de ton code au mien et le résultat est assez sympa. J'espère même en faire un petit Dhtml/JS sur le drag and drop un de ces jours...
Cordial kenevo !
22 oct. 2004 à 21:12
function position(coord) {
if (coord == 'X') {
return (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.clientX;
}
else if (coord == 'Y') {
return (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.clientY;
}
return false;
}
et au lieu de
var cursorPosX (navigator.appName.substring(0,3) "Net") ? e.pageX : event.clientX;
var cursorPosY (navigator.appName.substring(0,3) "Net") ? e.pageY : event.clientY;
je mets :
var cursorPosX = position('X');
var cursorPosY = position('Y');
Le remplacement ce fait à 3 endroits.
22 oct. 2004 à 17:16
Elkouo, je n'est plus internet (pour l'instant), mais ton commentaire est très juste, je ferais la modification plus tard.
21 oct. 2004 à 15:40
placer ces 2 évènement dans une fonction serait plus propre si un browser avait sa propre méthode, il suffirait juste de modifier la fonction.
// enregistrement de la position du curseur ; Si (netscape) ? vrai : faux;
var cursorPosX (navigator.appName.substring(0,3) "Net") ? e.pageX : event.clientX;
var cursorPosY (navigator.appName.substring(0,3) "Net") ? e.pageY : event.clientY;
21 oct. 2004 à 15:32
En plus la programmation est claire, intuitive et bien commentée.
Un grand bravo !
8 sept. 2004 à 17:55
Ma source :
http://www.javascriptfr.com/code.aspx?ID=25688
à été supprimer alors je l'ai ajouter ici.
8 sept. 2004 à 12:32
27 août 2004 à 23:25
J'ai rien compris du code mais c'est l'idéal pour se ressourcer.
En attendant les commentaires, je te donne 10/10
Merci flashfun.
25 août 2004 à 21:29
Ce programme fonctionne sur tous les navigateurs (normalement ;o).
Si on remplace tous les "document.images" par "document.elements", tous les éléments (sans exceptions) de la page deviennent Drag and Drop.
J'ai peur que si il y a trop d'élements le programme ralentisse à cause de la recherche de l'élément cliqué.
Je viens de faire une version qui se base sur le nom des
IDs :
http://www.javascriptfr.com/code.aspx?ID=25688
25 août 2004 à 18:49
10/10 !
LocalStone