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

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

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

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>

j'attends toujours vos sripts merci

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

merci a+

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

20 - 25 lignes max ??

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

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 !

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

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