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

Ce site au démarrage

begin process at 2010 02 10 09:02:27

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Jeux

> DRAG AND DROP, TIRÉ ET DÉPLACÉ DES IMAGES, SANS MODIFIER LES BALISES IMG +: OU EN CHANGEANT L'ID D'UNE BALISE

DRAG AND DROP, TIRÉ ET DÉPLACÉ DES IMAGES, SANS MODIFIER LES BALISES IMG +: OU EN CHANGEANT L'ID D'UNE BALISE

Information sur la source

Note :

9,78 / 10

Catégorie :Jeux Niveau :Initié Date de création :24/08/2004 Date de mise à jour :08/09/2004 17:53:54 Vu :9 056

Auteur : flashfun

Ecrire un message privé

Site perso

Ce membre participe au partage de revenus publicitaires

Commentaire sur cette source (19)

Ajouter un commentaire et/ou une note

Description

Comment déplacer des images avec un Drag and Drop.
Il suffit insérer le code dans l'entéte d'une page pour popuvoir déplacer toutes les images de la page.

Source

<html><head><script language="JavaScript">
<!--
// Définition des variables globale.
var objNum=0; // Numéros de l'objet courrant
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
function init()
{ // démarrage appelé dans la ligne body
// capture d'événènements appuyer, relacher
if (document.captureEvents)
{ // pour Netscape 4
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
}
document.onmousedown = startDrag;
document.onmouseup = endDrag;
}
function startDrag(e)
{
objNum= whichObj(e); // recherche l'objet selectionné
if(objNum!=null) // Si l'objet est trouvé
{
// 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(document.images[objNum].style.left);
objPosTopStart=parseInt(document.images[objNum].style.top);
// capture de l'événènement déplacement du curseur
if (document.captureEvents)
{ // pour Netscape 4
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove= moveIt;
}
return false; // retourne faux pour que l'explorateur ne tienne pas compte du déplacement
}
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
document.images[objNum].style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
document.images[objNum].style.top=objPosTopStart+cursorPosY-cursorPosYStart;
return false;
}
function endDrag(e)
{
// suppression du numéros de l'image
objNum = null;
// Arret de la capture de l'événènement déplacement du curseur
if (document.captureEvents)
{ // pour Netscape 4
document.releaseEvents(Event.MOUSEMOVE);
}
document.onmousemove= "";
}
function whichObj(e)
{
n=0;
// 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;
while (document.images[n])
{ // tant que l'image existe
// Initialise des attributs de l'image trouver
document.images[n].style.position="absolute";
document.images[n].style.zIndex=1000-n;
document.images[n].style.cursor="default";
if(document.images[n].style.left=="" || document.images[n].style.left==null)
{ // Si la position de l'image n'est pas définit, on le fait
document.images[n].style.left=0;
document.images[n].style.top=0;
}
// enregistrement de la position de l'image
objPosLeft=parseInt(document.images[n].style.left);
objPosTop=parseInt(document.images[n].style.top);
// position de l'objet sur lequel il est cliqué
if ((cursorPosX > objPosLeft) &&
(cursorPosX < objPosLeft + document.images[n].width) &&
(cursorPosY > objPosTop) &&
(cursorPosY < objPosTop + document.images[n].height))
{ // Si le curseur est dans la zone d'affichage de l'image
return n;
}
else n++;
}
return null;
}
// -->
</script></head><body onLoad="init()">
<img src="./img.jpg" />
<img src="./img.jpg" />
</body></html>
---------------------------- ----------------------------------------------- ---------------------------------- - -------------------------------------
<html><head><script language="JavaScript">
<!--
// On peux déplacer tous les éléments juste changeant sont id.
// Définition des variables globale.
var objNum=0; // Numéros de l'objet courrant
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
function init()
{ // démarrage appelé dans la ligne body
// capture d'événènements appuyer, relacher
if (document.captureEvents)
{ // pour Netscape 4
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
}
document.onmousedown = startDrag;
document.onmouseup = endDrag;
}
function startDrag(e)
{
objNum= whichObj(e); // recherche l'objet selectionné
if(objNum!=null) // Si l'objet est trouvé
{
// 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'objet
objPosLeftStart=parseInt(document.getElementById(objNum).style.left);
objPosTopStart=parseInt(document.getElementById(objNum).style.top);
// capture de l'événènement déplacement du curseur
if (document.captureEvents)
{ // pour Netscape 4
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove= moveIt;
}
return false; // retourne faux pour que l'explorateur ne tienne pas compte du déplacement
}
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'objet courrant
document.getElementById(objNum).style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
document.getElementById(objNum).style.top=objPosTopStart+cursorPosY-cursorPosYStart;
return false;
}
function endDrag(e)
{
// suppression du numéros de l'objet courrant
objNum = null;
// Arret de la capture de l'événènement déplacement du curseur
if (document.captureEvents)
{ // pour Netscape 4
document.releaseEvents(Event.MOUSEMOVE);
}
document.onmousemove= "";
}
function whichObj(e)
{
n=0;
var id="move"; // debut du nom des IDs des éléments qui doivent bouger, vous pouvez le changer.
// 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;
while (document.getElementById(id+n))
{ // tant que l'ID existe ("move0","move1","move2",...)
// Initialise des attributs de l'objet trouver
document.getElementById(id+n).style.position="absolute";
document.getElementById(id+n).style.zIndex=1000-n;
document.getElementById(id+n).style.cursor="default";
if(document.getElementById(id+n).style.left=="" || document.getElementById(id+n).style.left==null)
{ // Si la position de l'objet n'est pas définit, on le fait
document.getElementById(id+n).style.left=0;
document.getElementById(id+n).style.top=0;
}
// enregistrement de la position de l'objet
objPosLeft=parseInt(document.getElementById(id+n).style.left);
objPosTop=parseInt(document.getElementById(id+n).style.top);
if ((cursorPosX > objPosLeft) &&
(cursorPosX < objPosLeft + document.getElementById(id+n).offsetWidth) &&
(cursorPosY > objPosTop) &&
(cursorPosY < objPosTop + document.getElementById(id+n).offsetHeight))
{ // Si le curseur est dans la zone d'affichage
return id+n;
}
else n++;
}
return null;
}
// -->
</script></head><body onLoad="init()">
<img src="./img.jpg" width="300px" /><img src="./img.jpg" width="300px" /><img src="./img.jpg" width="300px" />
<img src="./img.jpg" id="move0" width="200px" />
<div id="move1" >11</div>
<div id="move2" >222222222</div>
<div id="move3" >3333333333333333</div>
<div id="move4" >44444444444444444444444444444444444444444444</div>
<img src="./img2.jpg" id="move5" width="200px" />
</body></html>

<html><head><script language="JavaScript">
<!--
// Définition des variables globale.
var objNum=0; // Numéros de l'objet courrant
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

function init()
{   // démarrage appelé dans la ligne body
	
	// capture d'événènements appuyer, relacher
	if (document.captureEvents)
	{ // pour Netscape 4
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
	}
    document.onmousedown = startDrag;
	document.onmouseup = endDrag;
}


function startDrag(e)
{ 
	objNum= whichObj(e); // recherche l'objet selectionné
	
    if(objNum!=null)     // Si l'objet est trouvé
    {
	    // 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(document.images[objNum].style.left);
	    objPosTopStart=parseInt(document.images[objNum].style.top);

		// capture de l'événènement déplacement du curseur
	   	if (document.captureEvents)
		{ // pour Netscape 4
			document.captureEvents(Event.MOUSEMOVE);
		}
	   	document.onmousemove= moveIt;
    }
    return false; // retourne faux pour que l'explorateur ne tienne pas compte du déplacement 
}


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
	document.images[objNum].style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
	document.images[objNum].style.top=objPosTopStart+cursorPosY-cursorPosYStart;
	
    return false;
}


function endDrag(e)
{
	// suppression du numéros de l'image
	objNum = null;
	
	// Arret de la capture de l'événènement déplacement du curseur
   	if (document.captureEvents)
	{ // pour Netscape 4
		document.releaseEvents(Event.MOUSEMOVE);
	}
   	document.onmousemove= "";

}



function whichObj(e)
{
	n=0;
    // 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;

	while (document.images[n])
    { // tant que l'image existe

		// Initialise des attributs de l'image trouver
        document.images[n].style.position="absolute";
		document.images[n].style.zIndex=1000-n;
		document.images[n].style.cursor="default";
		
        if(document.images[n].style.left=="" || document.images[n].style.left==null)
        {  // Si la position de l'image n'est pas définit, on le fait
        	document.images[n].style.left=0;
        	document.images[n].style.top=0;

        }

		// enregistrement de la position de l'image
		objPosLeft=parseInt(document.images[n].style.left);
        objPosTop=parseInt(document.images[n].style.top);

		// position de l'objet sur lequel il est cliqué
		if ((cursorPosX > objPosLeft) &&
		(cursorPosX < objPosLeft + document.images[n].width) &&
		(cursorPosY > objPosTop) &&
		(cursorPosY < objPosTop + document.images[n].height))
		{ // Si le curseur est dans la zone d'affichage de l'image
            return n;
		}
        else n++;
    }
	return null;
}

// -->
</script></head><body onLoad="init()">

<img src="./img.jpg" />
<img src="./img.jpg" />

</body></html>


----------------------------  ----------------------------------------------- ---------------------------------- - ------------------------------------- 


<html><head><script language="JavaScript">
<!--
// On peux déplacer tous les éléments juste changeant sont id.


// Définition des variables globale.
var objNum=0; // Numéros de l'objet courrant
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

function init()
{   // démarrage appelé dans la ligne body
	
	// capture d'événènements appuyer, relacher
	if (document.captureEvents)
	{ // pour Netscape 4
		document.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP);
	}
    document.onmousedown = startDrag;
	document.onmouseup = endDrag;
}


function startDrag(e)
{
	objNum= whichObj(e); // recherche l'objet selectionné
	
    if(objNum!=null)     // Si l'objet est trouvé
    {
	    // 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'objet
	   	objPosLeftStart=parseInt(document.getElementById(objNum).style.left);
	    objPosTopStart=parseInt(document.getElementById(objNum).style.top);

		// capture de l'événènement déplacement du curseur
	   	if (document.captureEvents)
		{ // pour Netscape 4
			document.captureEvents(Event.MOUSEMOVE);
		}
	   	document.onmousemove= moveIt;
    }
    return false; // retourne faux pour que l'explorateur ne tienne pas compte du déplacement 
}


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'objet courrant
	document.getElementById(objNum).style.left=objPosLeftStart+cursorPosX-cursorPosXStart;
	document.getElementById(objNum).style.top=objPosTopStart+cursorPosY-cursorPosYStart;
	
    return false;
}


function endDrag(e)
{
	// suppression du numéros de l'objet courrant
	objNum = null;

	// Arret de la capture de l'événènement déplacement du curseur
   	if (document.captureEvents)
	{ // pour Netscape 4
		document.releaseEvents(Event.MOUSEMOVE);
	}
   	document.onmousemove= "";

}


function whichObj(e)
{
	n=0;
    var id="move"; // debut du nom des IDs des éléments qui doivent bouger, vous pouvez le changer.
	
	// 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;

	while (document.getElementById(id+n))
    { // tant que l'ID existe ("move0","move1","move2",...)
	
		// Initialise des attributs de l'objet trouver
        document.getElementById(id+n).style.position="absolute";
        document.getElementById(id+n).style.zIndex=1000-n;
		document.getElementById(id+n).style.cursor="default";

        if(document.getElementById(id+n).style.left=="" || document.getElementById(id+n).style.left==null)
        { // Si la position de l'objet n'est pas définit, on le fait
        	document.getElementById(id+n).style.left=0;
        	document.getElementById(id+n).style.top=0;
        }
		
		// enregistrement de la position de l'objet
		objPosLeft=parseInt(document.getElementById(id+n).style.left);
        objPosTop=parseInt(document.getElementById(id+n).style.top);

		if ((cursorPosX > objPosLeft) &&
		(cursorPosX < objPosLeft + document.getElementById(id+n).offsetWidth) &&
		(cursorPosY > objPosTop) &&
		(cursorPosY < objPosTop + document.getElementById(id+n).offsetHeight))
		{ // Si le curseur est dans la zone d'affichage 
            return id+n;
		}
        else n++;
    }
	return null;
}
// -->
</script></head><body onLoad="init()">
<img src="./img.jpg" width="300px" /><img src="./img.jpg" width="300px" /><img src="./img.jpg" width="300px" />


<img src="./img.jpg" id="move0" width="200px" />
<div id="move1" >11</div>
<div id="move2" >222222222</div>
<div id="move3" >3333333333333333</div>
<div id="move4" >44444444444444444444444444444444444444444444</div>
<img src="./img2.jpg" id="move5" width="200px" />
</body></html>

Conclusion

J'ai mis 2 version, la première juste pour les images
et la 2ème pour tout objet dont l'id à été définis.

Historique

24 août 2004 23:22:11 :
08 septembre 2004 17:51:19 :: Commentaires...
08 septembre 2004 17:53:54 :: titre

Sources du même auteur

ASCENSEUR, DÉPLACEMENT SANS FIN SAUF SURVOLE DE LA SOURIS. X...

LIMITE LA TAILLE D'UN TEXTAREA ( MAXLENGHT )

MENU CONTEXTUEL CLICK DROIT AMELIORE

CONVERTION ET RE-CONVERTION DU TEXTE EN MODE ASCII (AVEC LA ...

REDIMENSION AUTOMATIQUE D'UN TEXTAREA OU INPUT TEXTE SELON L...

Toutes les sources de flashfun

Sources de la même categorie

DEMINEUR JAVACSCRIPT | PHP, CONFIGURABLE AVEC LE FRAMWORK JQ... par Nementon

ATTRAPE MOI SI TU PEUT par kazma

LE CÉLÈBRE JEU SNACK par lesnouesremy

QUIZZ MASTER : 2000 QUESTIONS POUR TESTER VOTRE CULTURE par amrounix

BILLARD EN JAVASCRIPT C'EST POSSIBLE ! par amrounix

Toutes les sources de la catégorie Jeux

Commentaires et avis

Commentaire de LocalStone le 25/08/2004 18:49:33

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

Commentaire de flashfun le 25/08/2004 21:29:47

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 :

http://www.javascriptfr.com/code.aspx?ID=25688

Commentaire de frop01 le 27/08/2004 23:25:45

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.

Commentaire de jotrash le 08/09/2004 12:32: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 <à++@

Commentaire de flashfun le 08/09/2004 17:55:56

Merci à vous.

Ma source :
http://www.javascriptfr.com/code.aspx?ID=25688

à été supprimer alors je l'ai ajouter ici.

Commentaire de Elkouo le 21/10/2004 15:32:58

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 !

Commentaire de Elkouo le 21/10/2004 15:40:17

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;

Commentaire de flashfun le 22/10/2004 17:16:35

Merci,
Elkouo, je n'est plus internet (pour l'instant), mais ton commentaire est très juste, je ferais la modification plus tard.

Commentaire de Elkouo le 22/10/2004 21:12:52

Voila la modif que j'ai faite :

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.

Commentaire de vbbreizh le 20/11/2004 15:35:28

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 !

Commentaire de paradoxxl le 05/06/2005 00:47:20

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+

Commentaire de metis15 le 06/10/2005 14:26:23

Je suis émerveillé par tant de connaissance !!
Cependant, ça ne marche pas sous Mozilla-FireFox chez moi.
Normal ??

Commentaire de younes371 le 20/09/2006 18:37:46

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

Commentaire de shin_hermit le 27/11/2006 20:14:54

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

Commentaire de masternico le 16/01/2007 10:27:45

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

Commentaire de zeratul67 le 28/06/2007 10:21:14

Simple, claire, efficace. Exactement l'exemple que je recherchais.
Mes félicitations, bon code.

Commentaire de tazzz28 le 02/01/2008 21:22:50

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

Commentaire de Jbs106 le 04/05/2008 11:46:47

et 4 ans plus tard, ca marche plus pas de zip.... j'en ai marre de chercher...

Commentaire de sonialand le 13/05/2009 21:42:08

salut tout le monde,
tres bien le code! moi aussi je veux bien savoir comment faire pour limiter les zones de deplacement, surtout en haut et en bas

Ajouter un commentaire

Nos sponsors

Derniers Blogs

UNE JOLIE-HORLOGE ET PAS QU'UN PEU ! par neodante

TECHDAYS PARIS 2010 : CONNECTEZ VOS DONNéES à SHAREPOINT 2010 AVEC LES BUSINESS CONNECTIVITY SERVICES par ROMELARD Fabrice

[DIVERS] SUIVRE VOS SéRIES PRéFéRéS SUR LA TOILE par orion

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

Forum

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

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

RE : FONCTION RECHERCHE DATE par jeca

DEFINITION DE LA METHODE SETBORDER par nassim1987

RE : FONCTION RECHERCHE DATE par Eyeron

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