div qui suit la souris

Sujet résolu

17 septembre 2017 à 0:17:40

Bonjour, je suis confronté à un problème que, depuis trop longtemps je n'arrive pas à résoudre. En gros, j'aimerais que lorsqu'on clique sur un div, quand on bouge la souris, ce même div suive la souris.

$('#monDiv').mousedown(function() {
    $('#monDiv').css({"opacity":"0.75"});
    document.addEventListener("mousemove", deplacerAvecSouris);
    return false;
  });
function deplacerAvecSouris(event) {
    console.log(event.pageY);
    $("#monDiv").css({"top": event.pageY, "left": event.pageX});
  }

Mais voila, le problème est qu'avec cette technique, si je clique sur le div, le div se déplace brusquement pile la ou il y a la souris. Ce qui serait bien, ça serait que lorsque l'on clique sur le div, il ne se déplace que par rapport au déplacement de la souris, un peu comme dans google drive, lors de la création d'un nouveau dossier. Je me suis tourné vers tout ce qui est .position().top pour le div lui même mais j'ai beau retourner le problème dans tous les sens, je ne trouve pas de solution.

J'espère avoir été suffisamment explicite, merci d'avance

Bonne soirée

-
Edité par Fbinouche 17 septembre 2017 à 0:20:14

Anonyme

17 septembre 2017 à 13:47:14

Bonjour,

En fait il faudra que tu modifie le positionnement de ton Div en "absolute".

Voilà un exemple basé sur ton code :

https://codepen.io/t_afif/pen/gGaXpY

Bien sur, comme tu peux le remarquer, il manque la partie ou tu doit lâcher la div. Je te laisse y réfléchir tout seul

Fbinouche

17 septembre 2017 à 22:23:43

Bonjour, et merci beaucoup pour ta réponse.

Ce que tu as fait, je l'ai deja fait . Le problème est que la souris se place en 0;0 par rapport au rectangle lorsque celui ci est pris. Ce qui serait cool, ca serait que si je prends le rectangle avec la souris par exemple en 10;10 (coordonnées ou 0;0 est le left et le top du rectangle), la souris se place en 10;10 par rapport au rectangle lorsque celui-ci est pris.

Pour bien comprendre (une image vaut mille mots :P) :

Si je clique en 10;10 par rapport au rectangle (flèche rouge)

Au déplacement, la souris se retrouvera en 0;0 par rapport à ce meme rectangle :

Merci d'avance,

Bonne soirée

Anonyme

17 septembre 2017 à 22:52:42

ok je vois, en fait l'idée serait d'avoir un truc de ce genre au niveau du code :

$("#monDiv").css({"top": event.pageY-y, "left": event.pageX-x});

ou les variable x et y désigne l'emplacement de la sourie à l'intérieur du rectangle et donc il faudra ajouté dans ton traitement du calcul.

Voilà un test assez rapide que je te laisse comprendre et amélioré :

https://codepen.io/t_afif/pen/gGaXpY

dilatation

18 septembre 2017 à 0:12:37

Fbinouche a écrit:

Bonjour, je suis confronté à un problème que, depuis trop longtemps je n'arrive pas à résoudre. En gros, j'aimerais que lorsqu'on clique sur un div, quand on bouge la souris, ce même div suive la souris.
$('#monDiv').mousedown(function() {
    $('#monDiv').css({"opacity":"0.75"});
    document.addEventListener("mousemove", deplacerAvecSouris);
    return false;
  });
function deplacerAvecSouris(event) {
    console.log(event.pageY);
    $("#monDiv").css({"top": event.pageY, "left": event.pageX});
  }
Mais voila, le problème est qu'avec cette technique, si je clique sur le div, le div se déplace brusquement pile la ou il y a la souris. Ce qui serait bien, ça serait que lorsque l'on clique sur le div, il ne se déplace que par rapport au déplacement de la souris, un peu comme dans google drive, lors de la création d'un nouveau dossier. Je me suis tourné vers tout ce qui est .position().top pour le div lui même mais j'ai beau retourner le problème dans tous les sens, je ne trouve pas de solution.

J'espère avoir été suffisamment explicite, merci d'avance

Bonne soirée

-
Edité par Fbinouche il y a environ 23 heures

bonjour,

en fait pour que le div ne fasse pas un "saut" au début du mouvement, il faut retenir la position du curseur au moment du clique.

Ma suggestion:

-une variable externe qui mémorise l'event du mousedown : var mondiv_mousedown

-un gestionnaire mousedown attaché à ton div -> mémorisation du event mousedown dans mondiv_mousedown

-un gestionnaire mousemove attaché a window -> si mondiv_mousedown existe: mise a jour de la position du div tenant compte du mousedown (ce que tu as oublié de faire)

-un gestionnaire mouseup attaché a window-> mettre la variable mondiv_mousedown à null.

Bonne continuation

-
Edité par dilatation 18 septembre 2017 à 0:15:10

007julien

18 septembre 2017 à 15:22:40

Voir cet exemple de Drag and Drop

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Drag & Drop</title>
<style type="text/css">
body {margin:0;font-family:Georgia;background-color:#ccc;}
*{color:#003;}
#pge {display:block;position:relative;width:800px;margin:10px auto;padding:10px;background-color:#fff;}
p {display:block;width:400px;margin:0;padding:0;}
p:first-letter {padding-left:50px;}
img,b {display:block;margin:20px;}

.drag {position:relative;cursor:pointer;}
</style>
<script type="text/javascript">
var dragobject={
	ox:null, oy:null, trgObj:null, okDrg:0,sx:0, sy:0,
	initialize:function(){
		document.onmousedown=this.drag
		document.onmouseup=function(){this.okDrg=0;
		// alert('Position: left: '+this.trgObj.offsetLeft+', top: '+this.trgObj.offsetTop)
		}}
	,drag:function(e){
		var evtobj=window.event? window.event:e
		this.trgObj=window.event? event.srcElement:e.target
		if (this.trgObj.className=="drag"){
			this.okDrg=1
			if (isNaN(parseInt(this.trgObj.style.left))){this.trgObj.style.left=0}
			if (isNaN(parseInt(this.trgObj.style.top))){this.trgObj.style.top=0}
			this.ox=parseInt(this.trgObj.style.left)
			this.oy=parseInt(this.trgObj.style.top)
			this.sx=evtobj.clientX
			this.sy=evtobj.clientY
			if (evtobj.preventDefault) evtobj.preventDefault()
			document.onmousemove=dragobject.moveit}}
	,moveit:function(e){
		var evtobj=window.event? window.event:e
		if (this.okDrg==1){
			this.trgObj.style.left=this.ox+evtobj.clientX-this.sx+"px"
			this.trgObj.style.top=this.oy+evtobj.clientY-this.sy+"px"
		return false}}
}
dragobject.initialize()
</script>
</head>
<body>
<div id="pge">  
	<img src="images/avatar_defaut.png" border=0 class=drag>
	<p class=drag>Lorem ipsum dolor sit amet consectetuer urna magna urna tortor habitant. Morbi volutpat Curabitur ligula a vitae Donec.
		<br>Nisl consectetuer a sodales sociis risus tincidunt vitae magna cursus laoreet.
	</p>  
	<p class=drag>Lorem ipsum dolor sit amet consectetuer Nam libero mauris suscipit hendrerit. Sollicitudin vel Pellentesque. Scelerisque semper cursus tortor eget porttitor sed urna sed justo Aenean. Consequat.
	</p>
	<b class=drag>All is moving on this world !</b>
</div>
</body>
</html>

Le principe consiste non seulement à stocker les coordonnées de la souris, mais aussi celles de la souris dans l'élément déplacé.

-
Edité par 007julien 18 septembre 2017 à 15:23:59

Fbinouche

18 septembre 2017 à 21:05:11

Bonjour, et tout d'abord merci ! Merci pour vos réponses précises qui m'ont indiqués ou meme fait avancer

Je me suis donc intéressé au drag&drop (je savais pas que ca s'appelait ainsi), et j'ai directement trouvé la library jQueryUI qui fait ça. Je pense que ca sera le plus simple à utiliser (tuto : https://openclassrooms.com/courses/decouvrez-la-puissance-de-jquery-ui/le-drag-drop-1)

Merci beaucoup à bvous tous en tous cas, bonne soirée