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

ps : 2 eme question :comment on met un saut de ligne dans un alert???

merci pour ton aide !

**SpaceFrog** · 24/08/2016, 15h24

Code :

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

alert('hello\nworld')

**patricktoulon** · 24/08/2016, 16h05

bonjour et merci space frog
je le saurais maintenant

si tu a une idée pour mon soucis je suis preneur plus j'essaie plus je m'enterre dans l'incompréhension

**melka one** · 24/08/2016, 20h00

il est dur dur a comprendre le code

**patricktoulon** · 24/08/2016, 20h09

oui il est peut être maladroit c'est que ce me fait tourner en bourrique ce truc ,en vbs 9 ligne suffisent

ce que je veux faire exactement

quand je reste appuyé dessus le div et que je suis dans le milieu pouvoir déplacer
quand je suis sur les bord ou a 10 pixel au plus bloquer le move et me servir des poignées qui apparaissent pour agrandir
quand j'ai double-cliqué (donc en mode (EDITION) pour écrire dedans bloquer le move

voila une idée ?????
j'ai trouvé plein d'exemples mais ils ont tous un bug ou déraillent un peu mais ne respectent pas les 3 conditions

**patricktoulon** · 25/08/2016, 18h44

re
bonjour a tous
bon finalement ne trouvant pas je pense aussi que ca vient du fait que je suis dans un content éditable ce qui annule certaine fonction

j'ai donc trouver une solution ajouter une pseudo barre dans le div survolé cette pseudo barre en restant appuyé me permet de déplacer a mon grès
et ca m'arrange j'ai l'intention d'y mettre des bouton outils a l'interieur

problème(toujours le même !!!) elle est sensée disparaitre quand on sort du champ du div

alors cela fonctionne quand je suis non content éditable mais fonctionne pas en content éditable

si quelqu'un a la solution je prends

code complet test :corrigez " ccccontenteditable" en "contenteditable" pour l'avoir en éditable

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Fenêtre</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <script type="text/javascript">
var dragged = null;
var dX, dY;
function start_drag(objet,event)
{
 
 dragged = objet;
 
 event.returnValue = false;
 if( event.preventDefault ) event.preventDefault();
 
 //Coordonnées de la souris
  var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
  var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
 
 //Coordonnées de l'élément
  var eX = 0;
  var eY = 0;
  var element = objet;
  do
  {
    eX += element.offsetLeft;
    eY += element.offsetTop;
    element = element.offsetParent;
  } while( element && element.style.position != 'absolute');
 //Calcul du décallage
  dX = x - eX;
  dY = y - eY;
 
}
function drag_onmousemove(event) 
{
  if( dragged ) 
  {
    var x = event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
    var y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
 
  //On applique le décalage
  x -= dX;
  y -= dY;
    dragged.style.position = 'absolute';
    dragged.style.left = x + 'px';
    dragged.style.top = y + 'px';
  }
}
function drag_onmouseup(event) 
{
  dragged = null; //On arrête le drag&drop
}
function addEvent(obj,event,fct)
{
  if( obj.attachEvent)
     obj.attachEvent('on' + event,fct);
  else
     obj.addEventListener(event,fct,true);
}
addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);
</script>
<style type="text/css">
#fenetre
{
 position: absolute;
 width: 400px;
 height: 200px;
 background-color: #DDD;
 border: 1px solid #000;
}
.close
{
 float: right;
 background-color: #EEE;
}
.divint  .barre
{
 position:absolute;
              width: 100%;
 height: 20px;
 background-color: #00D;
 color: #FFF;
            cursor:pointer;
margin-top:-20px;
visibility:hidden;
border-radius:10px
}
 
 
</style>
 <script type="text/javascript">
 </script>
  </head>
<body>
<div  id="editeur" ccccontenteditable="true" style="height: 600px; width: 700px;border:1 px solid black;">
 <p> du texte dans l'editeur</p>
<div id="fenetre" class="divint" onmouseover="this.children(0).style.visibility='visible'" onmouseout="this.children(0).style.visibility='hidden'">
 
<div class="barre" style="visibilty:hidden;"  onmousedown="start_drag(this.parentElement,event);">bouge</div>
 du texte dans mon div</div>
 
 
</div>
</body>
</html>

**patricktoulon** · 29/08/2016, 00h43

Bonsoir
toute les tentatives pour piloter le move du div a partir de lui même on plus ou moins été non concluante j'ai décidé d'aller au plus simple
tout est gérer par les évènement document

j'ai un seul soucis quand il s'agit d'un div enfant j'ai un décalage des le mousedown

quelqu'un peut me dire ou est l'erreur ??????
ca fait quand même quelque jour maintenant que je me bat avec ca imaginez ma tolérance au bruit

donc si vous auriez une réponse concrète je la prends

merci d'avance

voila le code en l'etat
on bouge les divs avec le mouse down droite

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE HTML>
<html>
  <head>
   <title>patrick WYSIWYG html </title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10"> 
<style>
</style>
<script  type= "text/javascript">
var DX,DY;
var dragged;
/////////////////////////////////////fonction stop drag////////////////////////////////////////////////////////////
function drag_onmouseup() {
 dragged = null; editeur.contentEditable="true";}//On arrête le drag&drop
//////////////////////////////////////////////fontion de position ///////////////////////////////////////////////////
function WhereMouse( ){
Mouse_X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
Mouse_Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
var obj=document.elementFromPoint(Mouse_X,Mouse_Y);
if(dragged!=null){
Mouse_X-= DX;Mouse_Y-= DY;  //On applique le décalage
    dragged.style.position = 'absolute';
    dragged.style.left = Mouse_X  + 'px';
    dragged.style.top = Mouse_Y + 'px';
dragged.style.position="absolute";
}
}
////////////////////////////////////////////////////////ajout des evenements mousemove et mouse up de l'object document///////////////////////
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",WhereMouse) : document.addEventListener('mousemove',WhereMouse,false);
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmouseup",drag_onmouseup) : document.addEventListener('mouseup',drag_onmouseup,false);
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousedown",gripp) : document.addEventListener('mousedown',gripp,false);
//////////////////////////////////////////////////////////////////////////////////////////////////////////
function gripp(){
if(event.button==2){
event.returnValue = false; if( event.preventDefault ) event.preventDefault();
X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
   Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
var obj=document.elementFromPoint(X,Y);
if ( obj.className=="divint" ){
   var element = obj;  var eX = 0;  var eY = 0;varDX=0;varDY=0;
  do  {    eX += element.offsetLeft; eY += element.offsetTop;    element = element.offsetParent;  } while(  element.tagName !="BODY");
 DX = X - eX;  DY= Y - eY;
dragged=obj;editeur.contentEditable="false";
event.returnValue = false; if( event.preventDefault ) event.preventDefault();
obj.oncontextmenu = function (event) {     return false} //on annule l'affichage du menu contextuel
}
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
</script>
</head>
<body>
 <button  onclick="insertdiv()"> ajouter un div </button>
 <div  id="editeur"contenteditable="true" style="height: 600px; width: 700px;border:1px solid black;">
 <p> du texte dans l'editeur</p>
 
     <div  id="div1" class="divint" style="width:250px;height:250px;border:1px solid red;" ><p> du texte dans mon div </p>
       <div  id="div2" class="divint" oncontextmenu=false style="oncontextmenu=false;width:200px;height:200px;border:1px solid blue;" ><p>du texte dans celui ci </p>
            <div  id="div3" class="divint" oncontextmenu=false style="oncontextmenu=false;width:100px;height:100px;border:1px solid green;" ><p>celui la aussi   </p>
            </div>
     </div>
 </div>
</div>
</body>
</html>

**melka one** · 29/08/2016, 12h37

jour

j'ai pu regarder un peut mieux le code de l'avant dernié poste et c'est pas beau je vais commencer par la partie drag quand on fait un mousedown sur l'element a deplacer sa declencher la fonction de deplacement mais c'est par la suite que plus rien ne vas

le plrobleme est le suivant l'evenement mousemove qui permet des detecter le deplacement ne peut etre lié directement a l'element que l'on veut deplacer il est lié au document car la position de la souris est en fonction de la fenetre voici un code de deplacement d'element

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
 
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
 
body{
font-family:Verdana, Geneva, sans-serif;
background-color:#9688ab;
}
 
.Style0 {
position:absolute;
width:200px;
height:150px;
border-style:groove;
border-width:2px;
background-color:#da9936;
}
</style>
<script type="text/javascript">
//<![CDATA[
 
var obj_drag={
 
elemdrag:null,
decx:null,
decy:null,
 
sp:function(evt){
 
		if(evt.type=="mousedown"){
			obj_drag.elemdrag=evt.currentTarget
 
			obj_drag.decx=evt.pageX - obj_drag.elemdrag.offsetLeft
			obj_drag.decy=evt.pageY - obj_drag.elemdrag.offsetTop
 
			evt.preventDefault();
			document.documentElement.addEventListener("mousemove", obj_drag.posi, false)
			obj_drag.elemdrag.addEventListener("mouseup", obj_drag.sp, false)
			obj_drag.elemdrag.removeEventListener("mousedown", obj_drag.sp, false)
 
			obj_drag.rar=false;
		}
 
		if(evt.type=="mouseup"){
			document.documentElement.removeEventListener("mousemove", obj_drag.posi, false)
			obj_drag.elemdrag.removeEventListener("mouseup", obj_drag.sp, false)
			obj_drag.elemdrag.addEventListener("mousedown", obj_drag.sp, false)
			obj_drag.rar=true;
		}
	},
 
posi:function(evt){
 
		var setX =evt.pageX;
		var setY =evt.pageY;
		obj_drag.elemdrag.style.left=(setX-obj_drag.decx)+"px";
		obj_drag.elemdrag.style.top=(setY-obj_drag.decy)+"px";
	},
 
init:function(){
 
		var all=document.getElementsByTagName('*');
 
		for(var i=0;i<all.length;i++){
 
			if(all[i].hasAttribute("data-drag")){
 
				all[i].addEventListener("mousedown", obj_drag.sp, false);
			}
		}
	}
}
addEventListener("load", obj_drag.init, false);
 
</script>
</head>
<body>
 
<div class="Style0" id="ta" style="top: 50px; left: 631px;" data-drag="true">
</div>
 
<div class="Style0" id="tb" style="top: 56px; left: 180px;" data-drag="true">
</div>
 
<div class="Style0" id="tc" style="top: 404px; left: 399px;" data-drag="true">
</div>
 
<div class="Style0" id="td" style="top: 329px; left: 71px;" data-drag="true">
</div>
 
<div class="Style0" id="te" style="top: 330px; left: 724px;" data-drag="true">
</div>
</body>
</html>

j'ai aussi noté d'autres problemes toujour en lien avec l'objet event on trouve du code appartenant aux anciennes versions de ie qui se mélange avec du code plus récent il faut savoir qu'en ce qui concerne la gestion des evenements ie j'usqu'a la version 8 fonctionnement un peut différemment des autres navigateurs et la il faut faire un choix soit on supporte ie8 mais le code sera alourdis soit on ne le supporte pas.

il y a aussi un truc que je trouve étrange c'est dans la fonction insertdiv()

le div est créé en utilisant les objet du dom mais a la fin au lieux de l'inséré tu recupere le outerHTML et inserre le html avec innerHTML c'est tres étrange car pourquoi ne pas l'inseré directement avec appendChild.

**patricktoulon** · 29/08/2016, 13h07

Bonjour Melka one

alors oui effectivement il y a du vieux code
1° je suis pas dans mon éléments en javascript je suis plutôt VB VBA VBS et accessoirement du Bath

2° attention tout de même je le redit pas a chaque fois le WiSIWYG sera intégré dans un control OCX (webbrowser) dans un userform en VBA

malheureusement ce control utilise que certaine librairie de IE et celle qui sont les siennes sont dérivé de la version IE8/9 a la base il n'a pas tellement évolué et donc avec des balise meta j'arrive a aller jusqu'à une compatibilité IE ++ (edge) mais pas tout

ce qui me pousse a utiliser des stratagèmes qui ne sont pas orthodoxe

après pour insert div effectivement il me faut une balise P avant et après sinon pendant l'Edition je suis bloqué je pourrait le faire avec insertnode et previous sibling et next sibling sur le parent du div inséré

mais j'ai découvert ces deux constante y a quelque jour je corrigerait après j'avance petit a petit

j'utilise pas appendChild car le div n' est pas forcement inséré en fin de document il l'est au niveau de la sélection
si il y a du texte dans sélection appendchil (div inséré, selectedtext) puis insertion sinon insertion tout court

je vais examiner ton code

PS: a tu pris en compte que les div insérer peuvent être un enfant d'un autre div
sur mes dernière version c'est ca le soucis (le calcul de la différence du pointeur par rapport au div
merci pour le temps que tu passe sur mon soucis

je regarde ton code et reviens

**patricktoulon** · 29/08/2016, 13h25

re
bon j'ai tester purée c'est propre!!!!

mais tu a négligé un détail c'est un wisiwig donc content éditable

j'ai donc mis tout tes div dans un div content éditable

j'ai ajouté a la fonction mouse down la condition sur le bouton droite de la souris

et Nikel je peut déplacer mes div avec le bouton droite de la souris mais des que je sélection un div ou double clique dessus
pour l'éditer(écrire dedans ) ;PPPPoff !!!!!!plus de drag sur sur ce div

**patricktoulon** · 29/08/2016, 13h59

Bon finalement c'était moi qui avait fait une faute de syntaxe sur le if button

mais reste un soucis yper important sur le soucis des div enfant de div on en revient toujour au calcul du decalage
et dans ton exemple on a un gros soucis

quand je bouge l'enfant le parent bouge avec

regarde

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!DOCTYPE html>
 
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
 
body{
font-family:Verdana, Geneva, sans-serif;
background-color:#9688ab;
}
 
.Style0 {
position:absolute;
width:200px;
height:150px;
border-style:groove;
border-width:2px;
background-color:#da9936;
}
</style>
<script type="text/javascript">
//<![CDATA[
 
var obj_drag={
 
elemdrag:null,
decx:null,
decy:null,
 
sp:function(evt){
 
  if(evt.type=="mousedown"){
                     if(evt.button==2){  
                                                   obj_drag.elemdrag=evt.currentTarget
 
   obj_drag.decx=evt.pageX - obj_drag.elemdrag.offsetLeft
   obj_drag.decy=evt.pageY - obj_drag.elemdrag.offsetTop
 
   evt.preventDefault();
   document.documentElement.addEventListener("mousemove", obj_drag.posi, false)
   obj_drag.elemdrag.addEventListener("mouseup", obj_drag.sp, false)
   obj_drag.elemdrag.removeEventListener("mousedown", obj_drag.sp, false)
 
   obj_drag.rar=false;
                          }  
                   }
 
  if(evt.type=="mouseup"){
   document.documentElement.removeEventListener("mousemove", obj_drag.posi, false)
   obj_drag.elemdrag.removeEventListener("mouseup", obj_drag.sp, false)
   obj_drag.elemdrag.addEventListener("mousedown", obj_drag.sp, false)
   obj_drag.rar=true;
  }
 },
 
posi:function(evt){
 
  var setX =evt.pageX;
  var setY =evt.pageY;
  obj_drag.elemdrag.style.left=(setX-obj_drag.decx)+"px";
  obj_drag.elemdrag.style.top=(setY-obj_drag.decy)+"px";
 },
 
init:function(){
 
  var all=document.getElementsByTagName('*');
 
  for(var i=0;i<all.length;i++){
 
   if(all[i].hasAttribute("data-drag")){
 
    all[i].addEventListener("mousedown", obj_drag.sp, false);
   }
  }
 }
}
addEventListener("load", obj_drag.init, false);
 
</script>
</head>
<body>
 <div id="editeur" contenteditable="true" style="width:800px;height:600px;border:1px solid black;">
<div class="Style0" id="ta" style="top: 50px; left: 631px;" data-drag="true">
</div>
 
<div class="Style0" id="tb" style="top: 56px; left: 180px;" data-drag="true">
</div>
 
<div class="Style0" id="tc" style="top: 404px; left: 399px;" data-drag="true">
<div class="Style0" id="td" style="top: 20px;width:100px;height:100px; left: 71px;background:blue;" data-drag="true">
</div>
</div>
 
 
<div class="Style0" id="te" style="top: 330px; left: 724px;" data-drag="true">
</div>
</div>
</body>
</html>

**melka one** · 29/08/2016, 21h37

il faut remplaceer currentTarget par target

Code :

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

obj_drag.elemdrag=evt.target

j'ai legerement modifier le tout afin de retirer le conteneditable quand on deplace un carre et le rajouté a la fin en utilisant setAttribute

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
 
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
 
body{
font-family:Verdana, Geneva, sans-serif;
background-color:#9688ab;
}
 
.Style0 {
position:absolute;
width:200px;
height:150px;
border-style:groove;
border-width:2px;
background-color:#da9936;
}
</style>
<script type="text/javascript">
//<![CDATA[
 
var obj_drag={
 
elemdrag:null,
decx:null,
decy:null,
 
sp:function(evt){
 
  if(evt.type=="mousedown"){
    if(evt.button==2){
 
		document.getElementById("editeur").setAttribute("contenteditable","false")
 
	   obj_drag.elemdrag=evt.target
 
	   obj_drag.decx=evt.pageX - obj_drag.elemdrag.offsetLeft
	   obj_drag.decy=evt.pageY - obj_drag.elemdrag.offsetTop
 
	   evt.preventDefault();
	   document.documentElement.addEventListener("mousemove", obj_drag.posi, false)
	   obj_drag.elemdrag.addEventListener("mouseup", obj_drag.sp, false)
	   obj_drag.elemdrag.removeEventListener("mousedown", obj_drag.sp, false)
	}  
}
 
  if(evt.type=="mouseup"){
   document.documentElement.removeEventListener("mousemove", obj_drag.posi, false)
   obj_drag.elemdrag.removeEventListener("mouseup", obj_drag.sp, false)
   obj_drag.elemdrag.addEventListener("mousedown", obj_drag.sp, false)
 
	document.getElementById("editeur").setAttribute("contenteditable","true")
	evt.preventDefault();
  }
 },
 
posi:function(evt){
 
  var setX =evt.pageX;
  var setY =evt.pageY;
  obj_drag.elemdrag.style.left=(setX-obj_drag.decx)+"px";
  obj_drag.elemdrag.style.top=(setY-obj_drag.decy)+"px";
 },
 
init:function(){
 
  var all=document.getElementsByTagName('*');
 
  for(var i=0;i<all.length;i++){
 
   if(all[i].hasAttribute("data-drag")){
 
    all[i].addEventListener("mousedown", obj_drag.sp, false);
   }
  }
 }
}
addEventListener("load", obj_drag.init, false);
 
</script>
</head>
<body>
 <div id="editeur" contenteditable="true" style="margin:auto;width:800px;height:600px;border:1px solid black;">
<div class="Style0" id="ta" style="top: 50px; left: 631px;" data-drag="true">
</div>
 
<div class="Style0" id="tb" style="top: 56px; left: 180px;" data-drag="true">
</div>
 
<div class="Style0" id="tc" style="top: 404px; left: 399px;" data-drag="true">
<div class="Style0" id="td" style="top: 20px;width:100px;height:100px; left: 71px;background:blue;" data-drag="true">
</div>
</div>
 
 
<div class="Style0" id="te" style="top: 330px; left: 724px;" data-drag="true">
</div>
</div>
</body>
</html>

**patricktoulon** · 29/08/2016, 21h55

re
bon ben la ca marche plus du tout avec evt.target que se soit en mode content editable ou pas

merci, pour ta patience

c'est un truc qui me fait monter la moutarde au nez :ca fait 6 jours que je plante la dessus rien ne va au final c'est ou presque ou a gauche ou a droite ou pas du tout

je devient fou avec ce machin

je savais que cela allait être difficile sans Jquery mais la ca dépasse l'entendement!!!!

avec ma version tout par les evenement document j'ai presque la total sauf le decalage de l'enfant div et je n'arrive pas a remettre le menu contextuel en cas de sélection de texte

bon je vais boire un café sinon je vais filer un coup de boule au PC

**melka one** · 29/08/2016, 22h46

sa marche avec ce code

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE html>
 
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
 
body{
font-family:Verdana, Geneva, sans-serif;
background-color:#9688ab;
}
 
.Style0 {
position:absolute;
width:200px;
height:150px;
border-style:groove;
border-width:2px;
background-color:#da9936;
}
</style>
<script type="text/javascript">
//<![CDATA[
 
var obj_drag={
 
elemdrag:null,
decx:null,
decy:null,
 
sp:function(evt){
 
	if(evt.button==2){
		if(evt.type=="mousedown"){
 
 
			document.getElementById("editeur").setAttribute("contenteditable","false")
 
		   obj_drag.elemdrag=evt.target
 
		   obj_drag.decx=evt.pageX - obj_drag.elemdrag.offsetLeft
		   obj_drag.decy=evt.pageY - obj_drag.elemdrag.offsetTop
 
		   evt.preventDefault();
		   document.documentElement.addEventListener("mousemove", obj_drag.posi, false)
		   obj_drag.elemdrag.addEventListener("mouseup", obj_drag.sp, false)
		   obj_drag.elemdrag.removeEventListener("mousedown", obj_drag.sp, false)
		} 
 
 
	  if(evt.type=="mouseup"){
	   document.documentElement.removeEventListener("mousemove", obj_drag.posi, false)
	   obj_drag.elemdrag.removeEventListener("mouseup", obj_drag.sp, false)
	   obj_drag.elemdrag.addEventListener("mousedown", obj_drag.sp, false)
 
		document.getElementById("editeur").setAttribute("contenteditable","true")
		evt.preventDefault();
		}
	}
},
 
posi:function(evt){
 
  var setX =evt.pageX;
  var setY =evt.pageY;
  obj_drag.elemdrag.style.left=(setX-obj_drag.decx)+"px";
  obj_drag.elemdrag.style.top=(setY-obj_drag.decy)+"px";
 },
 
init:function(){
 
  var all=document.getElementsByTagName('*');
 
  for(var i=0;i<all.length;i++){
 
   if(all[i].hasAttribute("data-drag")){
 
    all[i].addEventListener("mousedown", obj_drag.sp, false);
   }
  }
 }
}
addEventListener("load", obj_drag.init, false);
 
</script>
</head>
<body>
 <div id="editeur" contenteditable="true" style="margin:auto;width:800px;height:600px;border:1px solid black;">
<div class="Style0" id="ta" style="top: 50px; left: 631px;" data-drag="true">
</div>
 
<div class="Style0" id="tb" style="top: 56px; left: 180px;" data-drag="true">
</div>
 
<div class="Style0" id="tc" style="top: 404px; left: 399px;" data-drag="true">
<div class="Style0" id="td" style="top: 20px;width:100px;height:100px; left: 71px;background:blue;" data-drag="true">
</div>
</div>
 
 
<div class="Style0" id="te" style="top: 330px; left: 724px;" data-drag="true">
</div>
</div>
</body>
</html>

**patricktoulon** · 29/08/2016, 23h01

hah!!! ben on avance ca fait plaisir
entre temps j'avais trouver un autre moyen peut etre pas tres ortodoxe par rapport a ta pseudo classe

ceci:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
sp:function(evt){
 
  if(evt.type=="mousedown"){
                     if(evt.button==2){  
                  X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft)
   Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop)
obj_drag.elemdrag=document.elementFromPoint(X,Y)
 
//obj_drag.elemdrag=evt.currentTarget
  //alert(obj_drag.elemdrag.outerHTML)
   obj_drag.decx=evt.pageX - obj_drag.elemdrag.offsetLeft
   obj_drag.decy=evt.pageY - obj_drag.elemdrag.offsetTop
 ...............

elementfrom point il n'y a pas d'ambiguïté même si c'est un subsubsub children

reste maintenant le oncontextmenu conditionel

toujours dans le if button2

si du texte est sélectionné alors pas de drag mais affichage du menu contextuel sinon drag

trop fort ce Melka One number ONE

pour la selection de texte
j'ai déjà le return

Code :

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

1
2
3
/////////////////////////////////////////////////////////////////////////////////
function selectionne_text(){return window.getSelection().getRangeAt(0);}   
 ////////////////////////////////////////////////////////////////////////////////

cette fonction me renvoie si il y a du texte sélectionné ou pas je m'en sert pour tout les bouton de mon Wysiwyg

donc avec il faut faire la condition
j'ai essaye plein de chose mais non ca moache poas

**patricktoulon** · 30/08/2016, 08h23

Bonjour Melka one
gros problème !!! je ne peut plus les dissocier quand il sont enfant sinon il perdent leur attribut
si joint la capture

tandis que ma version avec la gestion d'un seul Object /évènement fonctionne (évènement document )

démo en image regarde l'inspecteur de document a droite

Nom : demo2.gif
Affichages : 687
Taille : 242,5 Ko

Nom : demo2.gif
Affichages : 687
Taille : 242,5 Ko

ce code la par contre fonctionne même après séparation et réassociation et vise et versa sans limite tu peut meme ajouter un div avec le bouton il est pris en charge tout de suite sans utiliser un seul de ses evenement

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE HTML>
<html>
  <head>
   <title>patrick WYSIWYG html </title>
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=10"> 
<style>
</style>
<script  type= "text/javascript">
var DX,DY;
var dragged;
/////////////////////////////////////fonction stop drag////////////////////////////////////////////////////////////
function drag_onmouseup() {
dragged = null; editeur.contentEditable="true";    //On arrête le drag&drop
X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
   Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
 var obj=document.elementFromPoint(X,Y);
 
}
//////////////////////////////////////////////fontion de position ///////////////////////////////////////////////////
function WhereMouse( ){
Mouse_X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
Mouse_Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
var obj=document.elementFromPoint(Mouse_X,Mouse_Y);
if(dragged!=null){
Mouse_X-= DX;Mouse_Y-= DY;  //On applique le décalage
    dragged.style.position = 'absolute';
    dragged.style.left = Mouse_X  + 'px';
    dragged.style.top = Mouse_Y + 'px';
dragged.style.position="absolute";
}
}
////////////////////////////////////////////////////////ajout des evenements mousemove et mouse up de l'object document///////////////////////
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousemove",WhereMouse) : document.addEventListener('mousemove',WhereMouse,false);
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmouseup",drag_onmouseup) : document.addEventListener('mouseup',drag_onmouseup,false);
typeof window.addEventListener == 'undefined' ? document.attachEvent("onmousedown",gripp) : document.addEventListener('mousedown',gripp,false);
//////////////////////////////////////////////////////////////////////////////////////////////////////////
function gripp(){
if(event.button==2){
X= event.clientX + (document.documentElement.scrollLeft + document.body.scrollLeft);
   Y = event.clientY + (document.documentElement.scrollTop + document.body.scrollTop);
 
var obj=document.elementFromPoint(X,Y);
if ( obj.className=="divint" ){
var selection = selectionne_text();
if(selection ==""){obj.oncontextmenu = function (event) { return false} ;}else{event.returnValue = true;obj.oncontextmenu = function (event) { return true}}
event.returnValue = false; if( event.preventDefault ) event.preventDefault();
DX=0;DY=0;
 DX=X-obj.offsetLeft;
 DY=Y-obj.offsetTop;
 //var L=obj.style.width;var T=obj.style.height
//DX = X -(L.substring(0,L.length-2)/2);  DY= Y -(T.substring(0,T.length-2)/2);
dragged=obj;editeur.contentEditable="false";
}
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////
function selectionne_text(){return window.getSelection().getRangeAt(0);}   
 ////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////
function insertdiv(){
var texte=document.selection.createRange().text;
 
 var selection = selectionne_text();
 
var selectedText = selection.extractContents();
   var balise = document.createElement('div');
   balise.className="divint";
   balise .style.width=200+"px";   
   balise .style.height=200+"px";
balise.style .float="left" ;                            
balise.style .border=1+"px solid black";
                         if (selection.length !=""){balise.appendChild(selectedText ); }else{   balise.innerHTML="<p>&nbsp;</p>";}
 
 
 balise.style.borderRadius = "10%";     
                                                          /*balise.onclick = function ()   { activelement=document.selection.createRange().parentElement();  } */     
 
                             selection.insertNode(balise);
 
 var codediv=document.getElementById("editeur").innerHTML;
       document.getElementById("editeur").innerHTML=codediv.replace(balise.outerHTML, "<p></p>"+ balise.outerHTML +"<p></p>");             
 
 }
/////////////////////////////////////////////////////////////////////////////////////////////////////////
 
</script>
</head>
<body>
 <button  onclick="insertdiv()"> ajouter un div </button>
 <div  id="editeur"contenteditable="true" style="height: 600px; width: 700px;border:1px solid black;">
 <p> du texte dans l'editeur</p>
 
     <div  id="div1" class="divint" oncontextmenu=false style="width:250px;height:250px;border:1px solid red;" ><p> du texte dans mon div </p>
       <div  id="div2" class="divint" style="width:200px;height:200px;border:1px solid blue;" ><p>du texte dans celui ci </p>
            <div  id="div3" class="divint" style="width:100px;height:100px;border:1px solid green;" ><p>celui la aussi   </p>
            </div>
     </div>
 </div>
</div>
</body>
</html>

**melka one** · 30/08/2016, 08h49

j'ai ajouter les modif afin d'éviter le deplacement quand du texte a été selectionné

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
 
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
 
body{
font-family:Verdana, Geneva, sans-serif;
background-color:#9688ab;
}
 
.Style0 {
position:absolute;
width:200px;
height:150px;
border-style:groove;
border-width:2px;
background-color:#da9936;
}
</style>
<script type="text/javascript">
 
 
function selectionne_text(){return window.getSelection().getRangeAt(0);} 
 
 
var obj_drag={
 
elemdrag:null,
decx:null,
decy:null,
drg:"no",
 
sp:function(evt){
 
	if(evt.button==2){
 
		if(evt.type=="mousedown" && selectionne_text()==""){
 
			document.getElementById("editeur").setAttribute("contenteditable","false")
 
			obj_drag.elemdrag=document.elementFromPoint(evt.pageX,evt.pageY);
 
			obj_drag.decx=evt.pageX - obj_drag.elemdrag.offsetLeft;
			obj_drag.decy=evt.pageY - obj_drag.elemdrag.offsetTop;
 
			evt.preventDefault();
			document.documentElement.addEventListener("mousemove", obj_drag.posi, false);
			obj_drag.elemdrag.addEventListener("mouseup", obj_drag.sp, false);
			obj_drag.elemdrag.removeEventListener("mousedown", obj_drag.sp, false);
			obj_drag.drg="ok";
		}
 
		else if(evt.type=="mousedown" && selectionne_text()!=""){
 
			evt.stopPropagation();
			alert("du texte a ete selectionné")	;
 
		}
 
 
		if(evt.type=="mouseup" && obj_drag.drg=="ok"){
 
			document.documentElement.removeEventListener("mousemove", obj_drag.posi, false);
			obj_drag.elemdrag.removeEventListener("mouseup", obj_drag.sp, false);
			obj_drag.elemdrag.addEventListener("mousedown", obj_drag.sp, false);
 
			document.getElementById("editeur").setAttribute("contenteditable","true");
		}
	}
},
 
posi:function(evt){
 
  var setX =evt.pageX;
  var setY =evt.pageY;
  obj_drag.elemdrag.style.left=(setX-obj_drag.decx)+"px";
  obj_drag.elemdrag.style.top=(setY-obj_drag.decy)+"px";
 },
 
init:function(){
 
  var all=document.getElementsByTagName('*');
 
  for(var i=0;i<all.length;i++){
 
   if(all[i].hasAttribute("data-drag")){
 
    all[i].addEventListener("mousedown", obj_drag.sp, false);
   }
  }
 }
}
addEventListener("load", obj_drag.init, false);
 
</script>
</head>
<body>
 <div id="editeur" contenteditable="true" style="margin:auto;width:800px;height:600px;border:1px solid black;">
<div class="Style0" id="ta" style="top: 50px; left: 631px;" data-drag="true">blablabla
</div>
 
<div class="Style0" id="tb" style="top: 56px; left: 180px;" data-drag="true">blablabla
</div>
 
<div class="Style0" id="tc" style="top: 404px; left: 399px;" data-drag="true">
<div class="Style0" id="td" style="top: 20px;width:100px;height:100px; left: 71px;background:blue;" data-drag="true">blablabla
</div>
</div>
 
 
<div class="Style0" id="te" style="top: 330px; left: 724px;" data-drag="true">
</div>
</div>
</body>
</html>

**melka one** · 30/08/2016, 13h04

le probleme c'est que dans mon cas les div sont en position absolute ce que tu cherche a faire est complexe je vient de reprendre le code mais il est fait pour des elements en position statique qui est le positionnement pas défaut ce positionnement suit le flux du document et la on peut modifié le texte

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
 
<html>
<meta charset="UTF-8">
<head>
<style type="text/css">
 
body{
font-family:Verdana, Geneva, sans-serif;
background-color:#9688ab;
}
 
.Style0 {
 
width:200px;
height:150px;
border-style:groove;
border-width:2px;
background-color:#da9936;
}
</style>
<script type="text/javascript">
 
 
function selectionne_text(){return window.getSelection().getRangeAt(0);} 
 
 
var obj_drag={
 
elemdrag:null,
decx:null,
decy:null,
drg:"no",
 
sp:function(evt){
 
	if(evt.button==2){
 
		if(evt.type=="mousedown" && selectionne_text()==""){
 
			document.getElementById("editeur").setAttribute("contenteditable","false")
 
			obj_drag.elemdrag=evt.target;
 
			while(!obj_drag.elemdrag.hasAttribute("data-drag")){
 
			obj_drag.elemdrag=obj_drag.elemdrag.parentNode
 
			}
			var bound=obj_drag.elemdrag.getBoundingClientRect()
			obj_drag.decx=evt.pageX;
			obj_drag.decy=evt.pageY;
 
			evt.preventDefault();
			document.documentElement.addEventListener("mousemove", obj_drag.posi, false);
			obj_drag.elemdrag.addEventListener("mouseup", obj_drag.sp, false);
			obj_drag.elemdrag.removeEventListener("mousedown", obj_drag.sp, false);
			obj_drag.drg="ok";
		}
 
		else if(evt.type=="mousedown" && selectionne_text()!=""){
 
			evt.stopPropagation();
			alert("du texte a ete selectionné")	;
 
		}
 
 
		if(evt.type=="mouseup" && obj_drag.drg=="ok"){
 
			document.documentElement.removeEventListener("mousemove", obj_drag.posi, false);
			obj_drag.elemdrag.removeEventListener("mouseup", obj_drag.sp, false);
			obj_drag.elemdrag.addEventListener("mousedown", obj_drag.sp, false);
 
			obj_drag.drg="no";
 
			document.getElementById("editeur").setAttribute("contenteditable","true");
		}
	}
},
 
posi:function(evt){
 
  var setX =evt.pageX;
  var setY =evt.pageY;
  console.log((getComputedStyle(obj_drag.elemdrag,null).marginLeft))
  obj_drag.elemdrag.style.marginLeft=parseInt(getComputedStyle(obj_drag.elemdrag,null).marginLeft)-(obj_drag.decx-setX)+"px";
  obj_drag.elemdrag.style.marginTop=parseInt(getComputedStyle(obj_drag.elemdrag,null).marginTop)-(obj_drag.decy-setY)+"px";
 
  obj_drag.decx =evt.pageX;
  obj_drag.decy =evt.pageY;
 },
 
init:function(){
 
  var all=document.getElementsByTagName('*');
 
  for(var i=0;i<all.length;i++){
 
   if(all[i].hasAttribute("data-drag")){
 
    all[i].addEventListener("mousedown", obj_drag.sp, false);
   }
  }
 }
}
addEventListener("load", obj_drag.init, false);
 
</script>
</head>
<body>
 <div id="editeur"  oncontextmenu="return false" contenteditable="true" style="margin:auto;width:800px;height:600px;border:1px solid black;">
 
 <p> du texte dans mon div </p>
 
 <div class="Style0" id="ta" style="top: 50px; left: 631px;" data-drag="true"><p> du texte dans mon div </p>
</div>
 
<div class="Style0" id="tb" style="top: 56px; left: 180px;" data-drag="true">blablabla
</div>
 
<div class="Style0" id="tc" style="top: 404px; left: 399px;" data-drag="true"><p> du texte dans mon div </p>
<div class="Style0" id="td" style="top: 20px;width:100px;height:100px; left: 71px;" data-drag="true"><p> du texte dans mon div </p>
</div>
</div>
 
 
<div class="Style0" id="te" style="top: 330px; left: 724px;" data-drag="true">
</div>
</div>
</body>
</html>

Connaitre la position du curseur dans un div enfant

JavaScript

Discussions similaires

Partager

Partager