Sujet Précédent Sujet Suivant

Soucis drag n drop

cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009 - 1 févr. 2008 à 05:21
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009 - 19 févr. 2008 à 23:29
Bonjour ,

J'ai trouvé sur ce site un script drag n drop, merci car il fonctionne bien.

Seulement le déplacement s'effectue sur tout le navigateur or moi j'aurai voulu un déplacement dans un cadre.

Script pour afficher les dimensions de mon cadre:

<center>
</center>

Essai.php
<HEAD>


<SCRIPT LANGUAGE="JavaScript">
<!-- Begin


N = (document.all) ? 0 : 1;
var ob;
function MD(e) {
if (N) {
ob = document.layers[e.target.name];


Y=e.y;
return false;
}
else {
ob = event.srcElement.parentElement.style;
X=event.offsetX;
Y=event.offsetY;
   }
}
function MM(e) {
if (ob) {
if (N) {
ob.moveTo((e.pageX-X), (e.pageY-Y));
}
else {
ob.pixelLeft = event.clientX-X + document.body.scrollLeft;
ob.pixelBottom = 17;
return false;
      }
   }
}
function MU() {
ob = null;
}


if (N) {
document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
}
document.onmousedown = MD;
document.onmousemove = MM;
document.onmouseup = MU;
//  End -->
</script>
</HEAD>


<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->

Voila si vous pouviez m'aider s'il vous plait, merci

19 réponses

Réponse 1 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
1 févr. 2008 à 13:48
Bonjour,
Je doute que ton script fonctionne sous FireFox, because


N = (document.all) ? 0 : 1;

suivi de
ob = document.layers[e.target.name];
donc en choisir un de plus récent, il y en a sur ce site, voir sur d'autres...
 



;O)
0
Réponse 2 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
1 févr. 2008 à 14:23
Merci, en vérité c'est 2 lignes ne veulent rien dire pour moi.
Donc je vais chercher un autre script.
Sinon peux tu quand meme me le modifier pour le déplacement s'il te plait.

Merci
0
Réponse 3 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
1 févr. 2008 à 16:01
il me faudrait une adresse en ligne pour voir le comportement général..
;O)
0
Réponse 4 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
1 févr. 2008 à 17:59
Le site n'est pas encore en ligne car je dois encore régler ce soucis et l'enregistrement des positions.

En fait j'ai fais une iframe pour créer un cadre, puis à l'intérieur il y a la page essai.php.

Le drag n drop s'effectue sur des images de plantes.
C'est images sont bloquées volontairement à 17 px du bas et restent libres d'être déplacées de gauche à droite.

Mon iframe fait 900 px et mon soucis est que je peux déplacer mes images en dehors de ma iframe, en gros mes plantes sortent du cadre.

Je voudrais les bloquer à l'intérieur du cadre.

Cela fait un petit moment que j'essai de trouver une solution, mais je bloque en plus je ne connais pas le js.

Merci de votre aide et de votre rapidité.
0

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

Posez votre question
Réponse 5 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
4 févr. 2008 à 02:48
Une petite aide s'il vous plait
0
Réponse 6 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
4 févr. 2008 à 13:38
Bonjour,
Il suffit peut être de tester la position de l'image en cours de déplacement...

- RECUPERATION de la Dimension de la fenêtre de l'IFRAME
- TEST de la position de l'image par rapport aux limites de l'IFRAME

PS : même une page succinte suffit parfois pour bien ce rendre compte du problème
;O)
0
Réponse 7 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
4 févr. 2008 à 15:05
Merci mais je ne connais pas le js et ça je ne vois pas comment faire.
0
Réponse 8 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
4 févr. 2008 à 16:07
Ce que je ne saisi pas bien... c'est que si le SCRIPT appartient au document contenu dans l'IFRAME les éléments glissé doivent disparaitre à l'approche des bords de l'IFRAME.

;O)
0
Réponse 9 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
4 févr. 2008 à 17:05
Merci les élements déplaçable disparaissent effectivement.
Sachant que ma page essai.php est inclue dans ma page index.php grace à:

<center>
</center>

Sinon j'ai utilisé le même script sur un autre jeu que j'ai fait.
Sur la carte clique sur foret.
On déplace des arbres et eux aussi disparaissent, sortent de mon cadre.

Pour voir:  http://animaworld.societeg.com

Je sais que tu n'as pas que cà à faire et je peux payer si il le faut car j'ai vraiment besoin de comprendre, alors merci
0
Réponse 10 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
5 févr. 2008 à 19:17
Bonjour,
je n'ai pas pu accéder à la page que tu indique, problème de loggin?
néanmoins je te livre un exemple complet qui devrait te satisfaire...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>[PetoleTeam]Drag Image</title>
<meta name= "Author" content="PetoleTeam">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
.gfdrag{
  position : absolute;
    cursor   : move;
}
.image_1 {
  background-color : #b0c4de;
  left : 10px;
  top  : 10px;
}
.image_2 {
  background-color : #fff0a0;
  left : 150px;
  top  : 50px;
}
.image_3 {
  background-color : #ccffcc;
  left : 300px;
  top  : 90px;
}
</style>
<script type="text/javascript">
var DRAG_Objet = null;
var O_Drag = new Object();
var Zindex = 1000;
//-- Definition zone de DRAG
var W_Top    = 10;
var W_Left   = 10;
var W_Right  = 890;
var W_Bottom = 540;
//--------------------------
function isDRAG_Objet( obj_){
  while( obj_){
    var szClass = obj_.className;
    if( szClass)
      if( szClass.indexOf("gfdrag") > -1)
        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;
    //-- Met au dessus des autres
    Obj.style.zIndex = Zindex++;
    return false;
  }
}
//-- Evenement sur Mouse
document.onmousedown = DRAG_Start;
document.onmouseup   = DRAG_Stop;
document.onmousemove = DRAG_Move;
</script>
</head>

</html>



Il restera sûrement des trucs à adapter, compatible tous navigateurs que j'ai en ma possession sous window
et pour finir
Je sais que tu n'as pas que cà à faire...
Ca c'est bien vrai, mais on ne refuse jamais un coup de main
... et je peux payer 



si il le faut...





Il y a des pro pour cela, sinon fait plaisir à CodesSources en cliquant sur des lien Sponsorisés il y en à de vraiment très intéressant
...car j'ai vraiment besoin de comprendre, alors...
je n'ai pas trop mis de commentaires mais je pense que cela devrait suffire, c'est perfectible mais bon...




;O)
0
Réponse 11 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
5 févr. 2008 à 21:51
Une petite aide s'il vous plait.
0
Réponse 12 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
5 févr. 2008 à 22:21
Un peu d'aide s'il vous plait
0
Réponse 13 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
5 févr. 2008 à 22:23
Ok merci je teste , désolé pour le double post je n'avais pas vu la page 2.
0
Réponse 14 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
5 févr. 2008 à 22:27
Je viens de tester.

MERCI, je vais essayer de comprendre et d'adapter.

Je vais faire un don.

Merci de ta rapidité.
0
Réponse 15 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
6 févr. 2008 à 22:55
Script parfait, merci PetoleTeam
0
Réponse 16 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
6 févr. 2008 à 22:58
Hum ! parfait est un bien grand qualificatif, merci quand même...
;O)
0
Réponse 17 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
19 févr. 2008 à 03:07
Bonjour,
J'ai essayé d'enregistrer les positions de mes images aprés le déplacement mais cela ne donne rien.
Vu que c'est ton script tu a peut etre la partie enregistrement?

Merci
0
Réponse 18 / 19
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
19 févr. 2008 à 18:04
Bonjour,

Pas sur de bien saisir le besoin d'enregistrer la position des DRAGs...

Sinon pour ce faire il suffit de mettre dans un cookies les valeurs et l'ID draguées lorsque l'on relache la mouse puis au rechargement de la page faire un test si le cookie existe alors on récupère les valeurs et on affiche l'objet à l'endroit souhaité...

Plein de source sur les cookies sur ce site voir sur d'autres
Un peu de lecture peut être avant http://fr.selfhtml.org/javascript/objets/document.htm#cookie
;O)
0
Réponse 19 / 19
cs_tales Messages postés 104 Date d'inscription jeudi 27 septembre 2007 Statut Membre Dernière intervention 5 octobre 2009
19 févr. 2008 à 23:29
Bonjour,
En fait j'ai déjà fais ça:

Code : JavaScript

<ol type="1"><li class="MsoNormal">function drag_stop(event) <?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /??>

</li><li class="MsoNormal">{

</li><li class="MsoNormal">  var cookie = '';

</li><li class="MsoNormal">  cookie += 'top: ' + dragged.style.top + '; ';

</li><li class="MsoNormal">  cookie += 'left: ' + dragged.style.left + '; ';

</li><li class="MsoNormal">  cookie += 'position: ' + dragged.style.position + '; ';

</li><li class="MsoNormal"> 

</li><li class="MsoNormal">  var expires = new Date();

</li><li class="MsoNormal">  expires.setYear(expires.getFullYear() + 1);

</li><li class="MsoNormal"> 

</li><li class="MsoNormal">  document.cookie = 'css_' + dragged.id + '=' + escape(cookie) + '; expires=' + expires.toGMTString();

</li><li class="MsoNormal"> 

</li><li class="MsoNormal">  dragged = null;

</li><li class="MsoNormal">}

</li></ol>

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

<ol type="1"><li class="MsoNormal">if(isset($_COOKIE['css_block']))

;
</li><li class="MsoNormal">{

</li><li class="MsoNormal">  $eco= echo 'style="' . htmlspecialchars($_COOKIE['css_block']) . '"';

</li><li class="MsoNormal">}

</li></ol>    5.   $aff = 1;

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

    9."  $eco;" id="a<?php echo $aff ?>"/>

<?php
  $aff++;

Mais cela me bloque l'image ou la fait disparaitre
0

Discussions similaires

Drag and drop dans un tableau HTML
dedeisep2 -
bizibiz17 -

6 réponses
Drag Drop de fichiers
Popolino69 -
Frederyck -

3 réponses
Drag and drop en VBA
ankhn -
ucfoutu -

1 réponse
[javafx] drag and drop treeview
cs_quicest -
CptPingu -

9 réponses
DROP TABLE IF EXISTS
MrOsmose -
skweeky -

1 réponse
Rejoignez-nous