Connaitre la position du curseur dans un div enfant

**patricktoulon** · 23/08/2016, 18h42

Bonsoir a tous
plus exactement je cherche a connaitre la différence du top avec le Y et pareil pour tout les coté d'un div mais j'avoue que je suis perdu depuis tout a l'heure j'ai des données erronées

il faut savoir de le div est un enfant d'un div content editable ca change un peu la donne visiblement

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
 
function drag_on(a,element){
var droite=0;var sheight=0;
var gauche=element.style.left;
var gauche =gauche.replace("px","");
var droite=element.style.width;var droite=gauche+droite.replace("px","");
var gauche=Math.round(event.clientX-gauche);var droite=Math.round(droite-event.clientX);
var stop=element.style.top;var stop=stop.replace("px","");
var sheight=element.style.height;var sheight=sheight.replace("px","");
var sheight=Math.round((stop+sheight)-event.clientY);
var stop=Math.round(event.clientY-stop);
bouge=a;
element.innerHTML="gauche" + gauche +"____droite"+ droite + "______top : " + stop + "_____height" +sheight ;
}

le but étant de créer une condition pour le rendre dragable
si je suis a moins de 15 pixel d'un des coté bouge sera a false ( comme ca je garde le redimensionnement dynamique par le content éditable)

si je suis un peu dans le milieu (aucun coté - de 15 )bouge sera a true

quelqu'un aurait la solution

merci pour le retours

**melka one** · 23/08/2016, 21h06

jour

essai avec getBoundingClientRect ()

Code :

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

1
2
3
4
5
var rect = element.getBoundingClientRect ();
              var  x = rect.left;
              var y = rect.top;
              var w = rect.width;
              var h = rect.height;

**patricktoulon** · 24/08/2016, 12h49

Bonjour Melka one

nickel j'obtiens bien ce que je veux

mais j'ai un soucis ca marche pas et même plus ca me supprime la Sélectabilité dans le content éditable je n'ai plus les carré de redimensionnement ni le cadre "////" au double clic (mode edition)
je ne comprends plus rien !!!
voici un exemple si tu sais pourquoi ca ne fonctionne pas je serait heureux de le savoir

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"  /> 
<title>Déplacer un div à la souris</title> 
<script>
bouge=false;
function Drag_off(element){  bouge=false;}
function drag_on(element){
var ok=true
var rect = element.getBoundingClientRect ();
               x = event.clientX-rect.left;
              w = (rect.left+rect.width) - event.clientX;
            y= event.clientY-rect.top;
              h = rect.top+rect.height-event.clientY;
var cote=[x,w,y,h];
var rect=0
//element.innerHTML="gauche" + cote[0]+"____droite"+cote[1]+ "______top : " + cote[2]+ "_____height"+cote[3];
for (vari=0;i<cote.length;i++){if(cote[i]<15){var ok=false;} if(cote[i]<0){var ok=false;element.innerHTML=ok;}  }
if(ok==false){
 bouge=false;}else{bouge=true;}
/*element.innerHTML=bouge ;*/
}
document.onmouseup = on_mouse_up; 
document.onmousemove = on_mouse_move;
function on_mouse_up(event){ bouge=false; } 
 
function on_mouse_move(event) { 
if(bouge==true){ 
      document.querySelector('#square').style.left = event.clientX-30+'px'; 
    document.querySelector('#square').style.top = event.clientY-30+'px'; 
         }
} 
</script>
<style> 
 #square{
position:absolute;
background-color:red;
border: 1px #000000 solid;
}