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

Ce site au démarrage

begin process at 2012 05 29 05:40:42

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil > Forum >

JavaScript Orienté objet (POO)

Enregistrer drag n drop

Poser une question dans le forum ou lancer une discussion

Enregistrer drag n drop

mercredi 13 février 2008 à 03:44:52 | Enregistrer drag n drop

tales

65 msg

105 msg CS

Bonjour,
Je voudrais savoir comment enregistrer la position de mes images aprés un drag n drop.
Que lorsque je réaffiche ma page mes images soient là oû je le voulais.

Voici le script de Petole Team ( merci à lui).

<script type="text/javascript">
var DRAG_Objet = null;
var O_Drag = new Object();
var Zindex = 6;
//-- Definition zone de DRAG
var W_Top    = 500;
var W_Left   = 2;
var W_Right = 1050;
var W_Bottom = 17;
//--------------------------
function isDRAG_Objet( obj_){
while( obj_){
    var szClass = obj_.className;
    if( szClass)

        return( obj_)
    obj_ = obj_.parentNode;
}
return( null);
}
//------------------
function DRAG_Stop(){
if( DRAG_Objet){
    DRAG_Objet = null;
}
}
//-------------------
function DRAG_Move(e){
if( DRAG_Objet){
    if( e) event = e;
    //-- Position d'affichage
    var PosX = event.clientX +O_Drag.left -O_Drag.clic_X;
    var PosY = event.clientY +O_Drag.top -O_Drag.clic_Y;
    //-- Test si dans Zone
    if( PosX > W_Left)
      if(( PosX +O_Drag.width) < W_Right)
        DRAG_Objet.style.left = PosX +"px";
    if( PosY > W_Top)
      if(( PosY +O_Drag.height) < W_Bottom)
        DRAG_Objet.style.top = PosY +"px";
    return false;
}
}
//--------------------
function DRAG_Start(e){
var Obj = e? e.target : event.srcElement;
//-- Test si Objet dragable
if(( Obj = isDRAG_Objet( Obj))){
    if( e) event = e;
    DRAG_Objet = Obj;
    //-- Recup Info sur objet
    O_Drag.width = Obj.offsetWidth;
    O_Drag.height = Obj.offsetHeight;
    O_Drag.left   = Obj.offsetLeft;
    O_Drag.top    = Obj.offsetTop;
    //-- Position du click de depart
    O_Drag.clic_X = event.clientX;
    O_Drag.clic_Y = event.clientY;

    return false;
}
}
//-- Evenement sur Mouse
document.onmousedown = DRAG_Start;
document.onmouseup   = DRAG_Stop;
document.onmousemove = DRAG_Move;
</script>
</HEAD>

<BODY>
<?php

$username= $userrow["username"];
$donnees= mysql_query("SELECT accessoire2,acc2,nplante1,nplante2,nplante3,nplante4,nplante5,nplante6,nplante7,nplante8,nplante9,pla1,pla2,pla3,pla4,pla5,pla6,pla7,pla8,pla9 FROM anni_plante WHERE username='$username'");
$reponse = mysql_fetch_array ($donnees);

$aff = 1;

while ($aff<= $reponse ['accessoire2'])
{
?>
<div class="es" style="position:absolute;left:10;bottom:17;z-index:6;">
<img src=/poisson/images/animal/<?php echo $reponse ['acc2']?> name="pa" >
</div>
<?php
$aff++;
}

$aff = 1;

while ($aff<= $reponse ['nplante1'])
{
?>
<div class="s" style="position:absolute;left:10;bottom:17;z-index:6;">
<img src=/poisson/images/animal/<?php echo $reponse ['pla1']?> name="pa" >
</div>
<?php
$aff++;
}

$aff = 1;

while ($aff<= $reponse ['nplante2'])
{
?>
<div class="s" style="position:absolute;left:40;bottom:17;z-index:6;">
<img src=/poisson/images/animal/<?php echo $reponse ['pla2']?> name="pb" >
</div>
<?php
$aff++;
}

Merci.

mercredi 13 février 2008 à 10:33:32 | Re : Enregistrer drag n drop

bultez

11958 msg

13348 msg CS

Bonjour,
    quand on quitte la page, mémoriser leurs positions, peut-être dans un cookie ?
    et les repositionner au réaffichage

    cookie regarder document.cookie
    position : clientTop et Left , ou offsetTop et Left ou autres ( exemple ici )

Cordialement

Bul «mon Site» «M'écrire»

mercredi 13 février 2008 à 18:15:39 | Re : Enregistrer drag n drop

tales

65 msg

105 msg CS

Merci en fait je ne connait pas le js, encore moin un cookie.
J'ai compris que document.cookie c'est pour appeller un cookie, mais comment et comment le faire.
position en js je ne sais pas faire.

dimanche 17 février 2008 à 17:45:06 | Re : Enregistrer drag n drop

tales

65 msg

105 msg CS

une petite aide s'il vous plait

lundi 18 février 2008 à 09:54:44 | Re : Enregistrer drag n drop

bultez

11958 msg

13348 msg CS

tu peux obtenir de l'aide si tu fais un ch'tit quelque chose.
ne compte sur personne pour tout te faire.
lis les docs ( cookies = 3 lignes ! avec les exemples !!! ), essaye,
    et si ça plante, tu reviens avec ce que tu as fait, on t'aidera à
    mettre au point.
( enfin... je parle pour moi là.... peut-être d'autres intervenants
    vaudront bien te faire ce que tu veux )

Cordialement

Bul [mon Site] [M'écrire]

lundi 18 février 2008 à 23:42:22 | Re : Enregistrer drag n drop

tales

65 msg

105 msg CS

Bonjour,

code rajouté dans un cookies "css_xxx" ou xxx est l'id de mon image.
A la fin du déplacement je prend "drag_stop".

Code : JavaScript

function drag_stop(event)
{
var cookie = '';
cookie += 'top: ' + dragged.style.top + '; ';
cookie += 'left: ' + dragged.style.left + '; ';
cookie += 'position: ' + dragged.style.position + '; ';
var expires = new Date();
expires.setYear(expires.getFullYear() + 1);
document.cookie = 'css_' + dragged.id + '=' + escape(cookie) + '; expires=' + expires.toGMTString();
dragged = null;
}

Bon maintenant j'ai une image qui se déplace qui est div class= "s"

je rajoute un code php, pour inclure le code css du cookie:

Code : PHP
<div class="s" <?php

if(isset($_COOKIE['css_block']))
{
echo 'style="' . htmlspecialchars($_COOKIE['css_block']) . '"';
}
?>

Bon mon soucis est que la même image est répétée grace à une boucle.

Et cela ne sauvegarde pas mes positions.

Merci

mardi 19 février 2008 à 10:15:15 | Re : Enregistrer drag n drop

bultez

11958 msg

13348 msg CS

_ curieux de mémoriser un cookie en javascript,
et de tenter de l'utiliser en php....
_ un cookie, c'est un string, unique pour un utilisateur sur un site.
_ pour positionner un élément, on use p(ar exemple) de
<balise... style="position:absolute;top:vertical;left:horizontal;..."... >

Cordialement

Bul [mon Site] [M'écrire]

mardi 19 février 2008 à 15:35:29 | Re : Enregistrer drag n drop

tales

65 msg

105 msg CS

Bonjour,
Le script du cookie est en js car le script drag n drop est en js ( enfin je crois).
Le cookie est en fonction du script donné plus haut.

Merci

mardi 19 février 2008 à 15:51:29 | Re : Enregistrer drag n drop

bultez

11958 msg

13348 msg CS

tu as lu ce que j'ai écris ?

    je répète autrement ?

    _ si on crée un cookie en javascript, autant le réutiliser en javascript
    _ pour un utilisateur donné, sur un site donné, ce qu'on appelle cookie c'est
       un string UNIQUE, mémorisé sur le micro client ( dans un fichier
       unique aussi pour un utilisateur donné, sur un site donné )
    _ pour positionner un div ( par exemple ! un img c'est pareil à la balise près )
        là où l'on veut il faut faire :
       <div ... style="position:absolute;top:100;left:150" ....>      100 et 150 sont des exemples

Cordialement

Bul [mon Site] [M'écrire]

mardi 19 février 2008 à 23:27:22 | Re : Enregistrer drag n drop

tales

65 msg

105 msg CS

Bonjour,

Code : JavaScript

function drag_stop(event)
{
var cookie = '';
cookie += 'top: ' + dragged.style.top + '; ';
cookie += 'left: ' + dragged.style.left + '; ';
cookie += 'position: ' + dragged.style.position + '; ';
var expires = new Date();
expires.setYear(expires.getFullYear() + 1);
document.cookie = 'css_' + dragged.id + '=' + escape(cookie) + '; expires=' + expires.toGMTString();
dragged = null;
}

Bon maintenant j'ai une image qui se déplace qui est div class= "s"

je rajoute un code php, pour inclure le code css du cookie:

Code : PHP
<div class="s" <?php

if(isset($_COOKIE['css_block'])) ;
{
$eco= echo 'style="' . htmlspecialchars($_COOKIE['css_block']) . '"';
}

5. $aff = 1;

    6.   while ($aff<= $reponse ['npoisson'])
    7.    {
    8.       ?>

9.<img src="images/animal/<?php echo $reponse ['poi'] ?>" $eco;" id="a<?php echo $aff ?>"/>

<?php
$aff++;

Mais cela me bloque l'image ou la fait disparaitre

Cette discussion est classée dans : objet, var, drag, obj, if

Répondre à ce message

Sujets en rapport avec ce message

Affectation d'un fonction pour un evenement pour IE et FF? [ par dudulebzh35 ] Bonjour a tous,J'ai une liste avec le nom de fichiers et de repertoires (dans une table). Lorsque je clique sur un repertoire, je vois ses fichiers, Page de chargement après un formulaire [ par cubitus79 ] Bonjour, J'ai actuellement des problème pour mettre en place une animation de chargement a la suite de mon formulaire. J'explique mieux: j'ai un for changer le sens d'un texte qui défile [ par anthony428 ] Bonjour à tous, je viens de plonger les mains dans un site dont je suis chargé de faire la refonte et je souhaiterais changer le sens du texte qui d parser un xml [ par zeitoun69 ] Bonjour je dois parser un fichier xml et former un tableau a partir des données extraite j'ai réussi a former le tableau mais les données sont celles IE8 > drag qui agrandit la zone affichable pourtant en overflow hidden [ par neiimad ] Bonjour. Ma zone affichable s'agrandit sous IE8 lorsque je tente de déplacer mon élément hors de celle ci, malgré l'overflow hidden. Je n'ai pourtan Compte à rebours [ par wadpap13 ] Bonsoir à tous !! J'ai fait un compte à rebours en javascript pour que dès que ça arrive à 0, une autre page soit chargée. Le problème c'est que si repetition code [ par chguignard ] bonjour, j'ai une page avec un menu. j'aimerai sortir le CSS de la page html ainsi que le detail du menu (les ul et li). comment puis je faire pour q JS : Firefox oui, autres navigateurs non... [ par tets88 ] Bonjour, Je me suis amusé à faire un calendrier. Sous Firefox il fonctionne no problemo amigo. Dès que j'essaye de l'ouvrir avec un autre navigateur IE et Mozzila Firefox n'active pas mon javascript de mon formulaire [ par momosan77 ] Bonjour, J'ai un souci, c'est quand j'essaie de valider le formulaire dans Mozzila ou IE celui-ci ne prend pas compte du javascript Alors que si je l' Fonction non activer... [ par momosan77 ] Bonjour, j'expose mon soucis donc c'est que la fonction principale ne considère ni les fonction secondaire no les fonction principale. Alors que sa a

Livres en rapport

La téléphonie mobile

Introduction à la vie artificielle

Programmer en Java

Flash MX et vidéo

Tous les livres pour Objet, Var, Drag, Obj, If

Nos sponsors

Derniers Blogs

JOYEUX ANNIVERSAIRE NIX par ebartsoft

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Installation et configuration de blogs Wordpress
Budget : 8 500€
Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP