Script: déplacer un objet sur une page ???

Fermé
sjlouis - 10 janv. 2002 à 11:12
piluc Messages postés 1 Date d'inscription samedi 5 mai 2012 Statut Membre Dernière intervention 5 mai 2012 - 5 mai 2012 à 00:26
je cherche un script qui permettra de déplacer un objet sur une page en cliquant sur un formulaire( genre: gauche, droite, haut bas) qui pemettra justemet le deplacement de l'objet.....
prière svp d'expliquer le script je suis debutant en javascript

le script ne doit pas etre trop long ( maxi 20 ,25 lignes )
Merci d'avance a tous
A voir également:

11 réponses

PhP Messages postés 1770 Date d'inscription lundi 11 décembre 2000 Statut Membre Dernière intervention 23 décembre 2009 606
11 janv. 2002 à 22:38
Salut sjlouis,

Voici un truc que tu peux tester.

Je sais pas si ca répond parfaitement à ta question

En tout cas ca permet de déplacer n'importe quel élément HTML à la souris en utilisant le drag & drop pour peu que tu positionnes cet élément de manière absolu

Par contre ca dépasse et de loin les 25 lignes ....

Cela dit tu peux optimiser le code et supprimer toute la gestion de la liste si tu ne veux utiliser qu'un seul objet.

Mais trève de discussion voici mon code :

D'abord la librairie javascript : fichier drap.js

// Php

// Déclaration object Mouse
// Une seule instance de l'objet Mouse sera crée :
// elle va servir à stocker la position absolue de la souris
function Mouse()
{
this.x=0;
this.y=0;
}

// Convertit les coordonnées relatives de la souris en coordonnées absolues
function mouse_rel2abs(event_object)
{
this.x=document.body.scrollLeft+event_object.clientX;
this.y=document.body.scrollTop+event_object.clientY;
}
Mouse.prototype.rel2abs=mouse_rel2abs;

// Déclaration objet DragObject
// id : nom d'un objet HTML (normalement le nom d'une balise DIV) que l'on veut
// pouvoir déplacer par drag & drop
// x, y : position initiale de l'objet HTML sur l'écran
// donner une valeur négative (par ex -5000) à x ou y pour masquer l'élément
function DragObject(id, x, y)
{
// On récupère la référence de l'objet HTML
this.ref=(id) ? window.document.getElementById(id): null;

// Offset par rapport à la position de la souris lorsque
// le drag commence
// Distance entre la position de l'élément HTML et la position de la
// souris en x et en y lorsque l'on presse le bouton gauche et que le souris
// se trouve au dessus de l'élément HTML
this.ofsX=0;
this.ofsY=0;

// Pour extensions futures : gestionnaires d'événements
this.onDrag=null
this.onDrop=null


// Position du coin gauche de l'élément HTML
this.y=y || 0;
this.x=x || 0;

if (this.ref) this.show()
}

// Fixe l'offset de l'objet drag par rapport à la position de la souris
// passée dans (x,y)
function dragObject_setOffset(x,y)
{
this.ofsX=this.ref.offsetLeft-x;
this.ofsY=this.ref.offsetTop-y;

}
DragObject.prototype.setOffset=dragObject_setOffset

// Fixe la nouvelle position de l'objet drag en (x,y)
function dragObject_setXY(x,y)
{
this.x=x+this.ofsX
this.y=y+this.ofsY
}
DragObject.prototype.setXY=dragObject_setXY

// Applique les coordonnées de l'objet drag à l'élément HTML sous-jaccent
// concrètement déplace l'élt HTML à l'écran
function dragObject_show()
{
this.ref.style.left=this.x+"px"
this.ref.style.top=this.y+"px"
}
DragObject.prototype.show=dragObject_show

// Pas utilisée
function dragObject_hide()
{
}
DragObject.prototype.hide=dragObject_hide;



// Objet DragList qui va permettre de stocker l'ensemble des objets qui vont
// pouvoir être manipuler par drag & drop
function DragList()
{
// Tableau d'objets de type DragObjet
this.dragObjects=new Array()

// Indique si une opération de drag&drop est en cours
this.dragActive=false;

// Index de l'objet dans le tableau dragObjects sur lequel porte le drag&drop
this.dragIndex=-1;

// Référence directe à l'objet de type dragObject sur lequel porte l'opération
this.dragObject=null;

// Offset de la souris pour l'objet de type dragObject sur lequel porte l'opération
this.ofsX=0
this.ofsY=0
}


// Ajoute un objet de obligatoirement type dragObject dans la liste
function dragList_add(dragObject)
{
this.dragObjects[this.dragObjects.length]=dragObject;
}
DragList.prototype.add=dragList_add


// Test si un objet de la liste se trouve aux coordonnées de la souris
function dragList_test(mouseObject)
{
this.dragIndex=-1;
this.dragObject=null;
this.dragActive=false;
for (i=0; i < this.dragObjects.length; i++)
{
dragObject=this.dragObjects[i];

x1=dragObject.ref.offsetLeft;
y1=dragObject.ref.offsetTop;


x2=x1+dragObject.ref.offsetWidth-1;
y2=y1+dragObject.ref.offsetHeight-1;

if (x1 <= mouseObject.x && x2 >= mouseObject.x && y1 <= mouseObject.y && y2 >= mouseObject.y)
{
this.dragIndex=i;
this.ofsX=mouseObject.x;
this.ofsY=mouseObject.y;
break;
}
}
}
DragList.prototype.test=dragList_test

// Arrêt du drag&drop
function dragList_stopDrag()
{
if ((this.dragObject) && (this.dragObject.onDrop)) this.dragObject.onDrop()
this.dragActive=false;
this.dragIndex=-1
this.dragObject=null
}
DragList.prototype.stopDrag=dragList_stopDrag

// Initialise les gestionnaires d'événements
function dragList_initDrag()
{
document.onmousemove=mouse_move;
document.onmousedown=mouse_down;
document.onmouseup=mouse_up;
}
DragList.prototype.initDrag=dragList_initDrag


// La drag revient en fait à recalculer la position de l'objet à chaque fois que la souris
// est déplacée
function dragList_drag(mouseObject)
{
if (this.dragIndex != -1)
{
if (!this.dragObject)
{
this.dragObject=this.dragObjects[this.dragIndex];
this.dragObject.setOffset(this.ofsX,this.ofsY);
}
this.dragObject.setXY(mouseObject.x,mouseObject.y);
this.dragObject.show();
this.dragActive=true;
}
}
DragList.prototype.drag=dragList_drag

var mouse=new Mouse()

// Gestionnaire d'événement qd souris déplacée
function mouse_move(mouse_event)
{
if (document.all) mouse_event=window.event;
mouse.rel2abs(mouse_event)

dragList.drag(mouse)
return false; // Très important !!!
}

// Gestionnaire d'événement qd souris appuyée
function mouse_down(mouse_event)
{
if (document.all) mouse_event=window.event;
mouse.rel2abs(mouse_event)

dragList.test(mouse);
//return dragActive;
}


// Gestionnaire d'événement qd souris relâchée
function mouse_up(mouse_event)
{
dragList.stopDrag()
//return true
}



Ensuite un ex d'utilisation : fichier drag.htm

<html>
<head>

<title>Drag & drop</title>


<script language="JavaScript" type="text/javascript" src="drag.js"></script>
<style>
.abs {position:absolute; left:100px; top:100px;}

.big {
font-size:12pt;
font-weight:bold;
font-family:arial;
}
</style>


<script language="javascript">
<!--

function load()
{
// Ne déclarer qu'un seul objet de type DragList
// IMPORTANT : le nommer 'dragList' et surtout ne pas changer son nom !!!!
dragList=new DragList();

// Initialise les gestionnaires d'événement associés à l'instance dragList
dragList.initDrag()


// Declaration des objets de type DragObject : toujours passer le nom de l'élt HTML en 1er paramètre
// On initialise la position de l'élément HTML dragTst en (100,100)
dragTest=new DragObject('dragTst',100,100)

// On ajoute le nouvel objet dans la liste pour permettre son drag & drop
dragList.add(dragTest)

// Maintenant on peut faire du drag & drop avec les objects contenus dans la liste ;:-)
}


// -->
</script>

</head>
<body onload="load()" background="images/background.jpg">
Pour tester le drag & drop, sélectionne ton pseudo et déplace le à la souris ...
<div id=dragTst class=abs border=1>
<table border=1>
<tr>
<td class=big>Salut sjlouis</td>
</tr>
</table>
</div>
</body>
</html>

Tu recrés ces 2 fichiers en utilisant le copier-coller puis tu les sauves sous le même répertoire .

Bon test

@+
Philippe

[[  The Truth is Out There   ]]
4
piluc Messages postés 1 Date d'inscription samedi 5 mai 2012 Statut Membre Dernière intervention 5 mai 2012
5 mai 2012 à 00:26
Bonjour,

Merci pour ce script, il y a longtemps que j'en cherchais un. Je me demandais si on met plus d'un élément à déplacer dans le fichier html, y-a-t'il un moyen de récupérer le nom de l'élément déplacé. J'ai essayé plusieurs variable mais je ne n'arrive pas à récupérer le nom de l'élément déplacé pour le distinguer des autres.

Merci!
0
Merci beaucoup !
je cherchais desesperement comment faire =)
j'ai étudier le script, va falloir que j'apprenne à le faire seul desormais.
je travaille sur un petit script et c'etait la seule chose qu'il me manquait,
merci infinément !!!
2
Phantom Lord
16 mai 2008 à 10:07
j'ai ce script qui marche bien

/******************************************
* Popup Box- By Jim Silver @ jimsilver47@yahoo.com
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e, cssname){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
crossobj.setAttribute("class", cssname)
crossobj.setAttribute("className", cssname)
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

</script>
2
j'attends toujours vos sripts merci
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
bonjour surper ce script pour deplacer les div , il y t'il un moyen de sauvegarder les coordonné et de les reutilisé.

merci a+
1
Merci pour ce super tuto!

J'aurai juste une question à vous poser : comment gérer plusieurs objects sur la même page?
Car en fait, lorsque je créé deux objets, les deux apparaissent sur ma page mais seul le dernier créé peut être déplaçable!

Si quelqu'un a la solution je suis prenneur!

Merci à tous
1
Joshua42 Messages postés 77 Date d'inscription vendredi 4 janvier 2002 Statut Membre Dernière intervention 18 décembre 2006 8
11 janv. 2002 à 23:39
20 - 25 lignes max ??
0
Bobinours Messages postés 2898 Date d'inscription jeudi 26 avril 2001 Statut Membre Dernière intervention 21 mars 2013 504
13 janv. 2002 à 00:59
Pour avoir 20 - 25 lignes, tu prends le code de PhP, tu supprimes les commentaires, et tu compacte le code.

Tu peux même le faire tenir sur une ligne si ça te chante...

-= Bobinours =-
0
hahaha, bien dit
0
Salut !
Enfait chez moi le script ne marche pas :( j'ai bien enregistrer le fichier drag.je et mit la page html mais je n'arrive pas à déplacer le pseudo .
Quelqu'un pourrait-il m'aider sil vous plait ?
merci et bonne journée
0
Salut,

le script est super mais j'ai quelques problèmes. Le contenu de mon DIV est un textarea et on ne pas le surligner sans que cela ne fasse bouger le DIV. Je voudrais savoir quel serait le code pour pouvoir bouger le DIV en cliquant sur un bouton et en le bougeant. J'utilise Windows XP et Internet Explorer 7.

Aussi, j'ai remarqué que le surlignage est impossible sur la page. Que faut-il que je supprime pour que cela fonctionne ?

Je recommande aussi de rajouter
style="cursor:move"
dans le DIV pour bien faire comprendre que l'objet est déplaçable.

Merci pour vos réponses !
0
Bonjour
j'etais tombé sur une page qui me permettais de creer des candy dollz maker (des poupées qu'on habillerais, donc, objets deplaçable) et il y avait un code qu'on coller en plein milieu du code de l'image, est ce que qqn connaitrais ce code ? Merci
0
<script type="text/javascript">
function getX(id) {return window.document.getElementById(id).offsetLeft}
function getY(id) {return window.document.getElementById(id).offsetTop}

/*
* Function movePosition(id,x1,y1)
*
* Permet de deplacer un objet sur une page web
* => "id" = identifiqnt de l'objet a deplaer
* => "x" = vqleur des abscisse en "px" (psitif => droite)
* => "y" = vqleur des ordonnees en "px" (psitif => bas)
*/
function movePosition(id,x1,y1)
{
var x0=getX(id);
var y0=getY(id);

window.document.getElementById(id).style.left=x0+x1+"px";
window.document.getElementById(id).style.top=y0+y1+"px";
//alert("Coordonnées du id='"+id+"': x = "+x+"; y = "+y+";");
}
</script>
0
ce code permet-il de déplacer un objet sur une page? à mon avis ca ser juste à repositionner le DIV
0