Discussion :

[Gob59]

Bonjour,

Le titre n’étant pas forcément des plus explicite, voici ce que je cherche à faire :

- j'ai codé une extension Chrome qui prend la forme d'une popup
- une div semi-transparente qui est en :
> position:fixed
> z-index:100
afin de s'afficher par dessus le site et le fixed permet de la laisser en place quand on scroll ledit site
Ceci pour des raisons de praticité évidente (on utilise l'extension pendant la navigation).

Je l'ai récemment faite évaluer, plus de contenus et de fonctionnalités j'ai donc rendu une inner div de la popup scrollable et j'aimerais également la rendre draggable
pour se faire je suis ce tuto :
https://www.w3schools.com/howto/howto_js_draggable.asp

le soucis, visible dans la démo du tuto, c'est que devant passer la popup en absolute, je perds les propriétés du "position:fixed" que je souhaite absolument garder.

Ma question est donc la suivante :
- "Comment rendre la popup draggable tout en la laissant immobile lors du scroll du site par dessous ?"

D'avance merci pour votre aide,

[NoSmoking]

Bonjour,
sur le « startDrag » tu passes ton élément en position:absolute en lui affectant les bonnes valeurs de top/left et sur le « EndDrag » tu repasses ton élément en position:fixed en lui affectant les nouvelles valeurs top/left.

[EDIT]
j'ai regardé le code que tu nous indiques et il te suffit de modifier le CSS de l'élément à déplacer

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
#mydiv {
/*  position: absolute;  /* à modifier */
  position: fixed;
  top: 0;             /* à ajuster */
  left: 0;            /* à ajuster */
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

[melka one]

jour

tu doit pouvoir jouer sur les marge (marginLeft,marginTop) plutot que left et top

[NoSmoking]

Plus efficace pour limiter les « repaint », serait de jouer avec la propriété CSS transform et la fonction translate(x,y).