Modification d'une fonction javascript

Fermé

Notilius - 26 août 2008 à 04:27
Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 - 26 août 2008 à 09:49

Bonjour,
J'ai trouver une fonction en navigan sur le net pour deplacer un div ou autre via la souris dans une page html .
J'aimerai pourvoir bloquer mon div qui ce deplace dans un <td> d'un tableau pour que celui-ci ne ce deplace pas sur toute la page web .
Je ne connai rien au javascript en esperant que cela soi réalisable merci a vous .

Voici le code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>

<SCRIPT LANGUAGE=JavaScript>

var X_OTHER = 1;
var X_LEFT = 2;
var X_RIGHT = 3;

var Y_OTHER = 1;
var Y_UP = 2;
var Y_DOWN = 3;

var vgCurrentElement = null;
var vgCurrentPositionX = X_OTHER;
var vgCurrentPositionY = Y_OTHER;

var vgCurrentX = 0;
var vgCurrentY = 0;
var vgCurrentWidth = 0;
var vgCurrentHeight = 0;

var vgMouseX = 0;
var vgMouseY = 0;
var vgMouseDiffX = 0;
var vgMouseDiffY = 0;
var vgMouseDown = false;

var vgTimerMouse;
var vgTimerTime = 10;

//----------------------------//
function position(e)
{
vgMouseX = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
vgMouseY = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
}

//----------------------------//
function fnResizeDiv()
{
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
document.getElementById(vgCurrentElement).style.left = vgCurrentX;
document.getElementById(vgCurrentElement).style.top = vgCurrentY;
document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;
document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;
document.getElementById('hauteur').value = vgCurrentX;
document.getElementById("largeur").value= vgCurrentY;
document.getElementById('taillel').value = vgCurrentWidth;
document.getElementById("tailleh").value= vgCurrentHeight;
}
}

//----------------------------//
function fnOnMouseDown()
{
vgMouseDown = true;

if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
//Init of size
vgCurrentX = document.getElementById(vgCurrentElement).offsetLeft;
vgCurrentY = document.getElementById(vgCurrentElement).offsetTop;
vgCurrentWidth = document.getElementById(vgCurrentElement).offsetWidth;
vgCurrentHeight = document.getElementById(vgCurrentElement).offsetHeight;

//Init of distance
vgMouseDiffX = vgMouseX-vgCurrentX;
vgMouseDiffY = vgMouseY-vgCurrentY;

//Init of position
if(vgMouseDiffX < 10 || (vgCurrentWidth-vgMouseDiffX) < 10)
{
if(vgMouseDiffX < vgCurrentWidth/2)
vgCurrentPositionX = X_LEFT;
else
vgCurrentPositionX = X_RIGHT;
}
else
vgCurrentPositionX = X_OTHER;

if(vgMouseDiffY < 10 || (vgCurrentHeight-vgMouseDiffY) < 10)
{
if(vgMouseDiffY > vgCurrentHeight/2)
vgCurrentPositionY = Y_DOWN;
else
vgCurrentPositionY = Y_UP;
}
else
vgCurrentPositionY = Y_OTHER;

vgTimerMouse = setInterval("fnOnMouseMove();", vgTimerTime);
}
}

function fnOnMouseUp()
{
vgMouseDown = false;
clearInterval(vgTimerMouse);
}

function fnOnMouseMove()
{
if(vgMouseDown && vgCurrentElement!=null && vgCurrentElement!=undefined)
{
switch(vgCurrentPositionX)
{
case X_LEFT: vgCurrentWidth += vgCurrentX-vgMouseX;
if(vgCurrentWidth<0)
vgCurrentWidth = 0;
else
vgCurrentX = vgMouseX;
break;
case X_RIGHT: vgCurrentWidth = vgMouseX-vgCurrentX;
if(vgCurrentWidth<0)
vgCurrentWidth = 0;
break;
default: break;
}
switch(vgCurrentPositionY)
{
case Y_UP: vgCurrentHeight += vgCurrentY-vgMouseY;
if(vgCurrentHeight<0)
vgCurrentHeight = 0;
else
vgCurrentY = vgMouseY;
break;
case Y_DOWN: vgCurrentHeight = vgMouseY-vgCurrentY;
if(vgCurrentHeight<0)
vgCurrentHeight = 0;
break;
default: break;
}

if(vgCurrentPositionX==X_OTHER && vgCurrentPositionY==Y_OTHER)
{
vgCurrentX = vgMouseX-vgMouseDiffX;
vgCurrentY = vgMouseY-vgMouseDiffY;
}

fnResizeDiv();
}
}

function fnOnMouseOver(sSelectedElementName)
{
if(!vgMouseDown)
{
if(sSelectedElementName==null && sSelectedElementName!="undefined")
{
vgCurrentElement = null;
}
else
{
vgCurrentElement = sSelectedElementName;
}
}
}

//----------------------------//
function fnOnLoad()
{
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = position;

//fnResizeDiv();
}

</script>
</head>
<body onLoad="fnOnLoad();" onMouseDown="fnOnMouseDown();" onMouseUp="fnOnMouseUp();">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="400" align="left" valign="top"><div id="divTest2" name="divTest2" onMouseOver="fnOnMouseOver('divTest2');" onMouseOut="fnOnMouseOver();"><img src="test.JPG" width="100%" height="100%" /></div>
Position dans l'image depuis le bord <input name="hauteur" type="text" id="hauteur">
Position dans l'image depuis le haut<input type="text" name="largeur" id="largeur">
<input type="text" name="taillel" id="taillel">
<input type="text" name="tailleh" id="tailleh">
</td>
</tr>
</table>
</body>
</html>

Merci d'avance

A voir également:

Modification d'une fonction javascript
Fonction si et - Guide
Suivi de modification word - Guide
Logiciel gratuit modification pdf - Guide
Telecharger javascript - Télécharger - Langages
Modification dns - Guide

1 réponse

Réponse 1 / 1

Mimiste Messages postés 1149 Date d'inscription samedi 17 mai 2008 Statut Membre Dernière intervention 6 mars 2016 206
26 août 2008 à 09:49

Bonjour
En modifiant un peu le script

remplace la fonction fnResizeDiv par celle la
ici le deplacement sera bloqué a 500 de largeur et 500 de hauteur

//----------------------------//
function fnResizeDiv()
{
if(vgCurrentElement!=null && vgCurrentElement!=undefined)
{
if(vgCurrentWidth <= 500)
{
document.getElementById(vgCurrentElement).style.left = vgCurrentX;
document.getElementById(vgCurrentElement).style.width = vgCurrentWidth;
document.getElementById('hauteur').value = vgCurrentX;
document.getElementById('taillel').value = vgCurrentWidth;
}

if(vgCurrentHeight <= 500)
{
document.getElementById(vgCurrentElement).style.top = vgCurrentY;
document.getElementById(vgCurrentElement).style.height = vgCurrentHeight;
document.getElementById("largeur").value= vgCurrentY;
document.getElementById("tailleh").value= vgCurrentHeight;
}
}
}

Discussions similaires

Remplir une cellule (texte) en fonction d'une autre (texte).

Javascript Arrondi à 2 chiffres après la virgule