Salut,
Merci de mettre à disposition ce code sur le forum.
J'ai essayé de le mettre en place mais j'ai des erreurs sur la page. Et comme
je n'y connais pas grand chose en javascript je ne sais pas le corriger.
D'autre personnes ont essayé de le faire fonctionner?
Bon dev à tous
Christian
"temsa" <temsa@_NOSPAM_free.fr> wrote:
Voilà le code que j'ai mis en place pour pouvoir rendre une cellule bougeable
dans une page.
L'utilisation est simple: il suffit de mettre toutes ces fonctions dans
une
collection de fonctions navigateur, puis, dans la page où l'on veut rendre
une cellule bougeable, il faut rajouter dans onload:
setDragable('CELLULE')
où CELLULE représente le nom de la cellule à rendre bougeable, en majuscule
(c'est peut-être possible en utilisant les Alias, mais j'ai pas essayé,
et
je sais pas ce que retourne cellule..Alias):
function dragIsDown(e) {
//make note of starting positions and detect mouse movements
if( ( e && ( e.which > 1 || e.button > 1 ) ) || ( window.event && ( window.event.which
1 || window.event.button > 1 ) ) ) { return false; }
window.msStartCoord = dragMousePos(e); window.lyStartCoord = this.style?[parseInt(this.style.left),parseInt(this.style.top)]:[parseInt(this.left),parseInt(this.top)];
if( document.captureEvents && Event.MOUSEMOVE ) { document.captureEvents(Event.MOUSEMOVE);
document.captureEvents(Event.MOUSEUP); }
window.storeMOUSEMOVE = document.onmousemove; window.storeMOUSEUP = document.onmouseup;
window.storeLayer = this;
document.onmousemove = dragIsMove; document.onmouseup = dragIsMove; return
false;
}
function dragMousePos(e) {
//get the position of the mouse
if( !e ) { e = window.event; } if( !e || ( typeof( e.pageX ) != 'number'
&& typeof( e.clientX ) != 'number' ) ) { return [0,0]; }
if( typeof( e.pageX ) == 'number' ) { var xcoord = e.pageX; var ycoord =
e.pageY; } else {
var xcoord = e.clientX; var ycoord = e.clientY;
if( !( ( window.navigator.userAgent.indexOf( 'Opera' ) + 1 ) || ( window.ScriptEngine
&& ScriptEngine().indexOf( 'InScript' ) + 1 ) || window.navigator.vendor
== 'KDE' ) ) {
if( document.documentElement && ( document.documentElement.scrollTop ||
document.documentElement.scrollLeft
) ) {
xcoord += document.documentElement.scrollLeft; ycoord += document.documentElement.scrollTop;
} else if( document.body && ( document.body.scrollTop || document.body.scrollLeft
) ) {
xcoord += document.body.scrollLeft; ycoord += document.body.scrollTop; }
} }
return [xcoord,ycoord];
}
function createDragableLayer(layerContent,leftPos,topPos,layerWidth,layerHeight,layerBG)
{
if( document.layers ) {
document.write( '<layer left="'+leftPos+'" top="'+topPos
+'" width="'+layerWidth+'" '+(layerHeight?('height="'
+layerHeight+'" '):'')+(layerBG?('bgcolor="'+layerBG
+'" '):'')
+'onmouseover="this.captureEvents(Event.MOUSEDOWN);this.onmousedown=dragIsDown;">'
+layerContent+'</layer>' );
} else {
document.write( '<div style="position:absolute;left:'
+leftPos+'px;top:'+topPos+'px;width:'
+layerWidth+'px;'+(layerHeight?('height:'+layerHeight+'px;'):'')
+(layerBG?('background-color:'+layerBG+';'):'')
+'" onmouseover="this.onmousedown=dragIsDown;" ondragstart="return false;"
onselectstart="return false;">'
+layerContent+'</div>' );
}
}
function dragIsMove(e) {
//move the layer to its newest position
var msMvCo = dragMousePos(e); if( !e ) { e = window.event ? window.event
: ( new Object() ); }
var newX = window.lyStartCoord[0] + ( msMvCo[0] - window.msStartCoord[0]
);
var newY = window.lyStartCoord[1] + ( msMvCo[1] - window.msStartCoord[1]
);
//reset the mouse monitoring as before - delay needed by Gecko to stop jerky
response (hence two functions instead of one)
//as long as the Gecko user does not release one layer then click on another
within 1ms (!) this will cause no problems
if( e.type && e.type.toLowerCase() == 'mouseup' ) { document.onmousemove
= storeMOUSEMOVE; document.onmouseup = window.storeMOUSEUP; }
if( navigator.product == 'Gecko' ) { window.setTimeout('dragIsMove2('+newX+','+newY+');',1);
} else { dragIsMove2(newX,newY); }
}
function dragIsMove2(x,y) { var oPix = ( document.childNodes ? 'px' : 0
),
theLayer = ( window.storeLayer.style ? window.storeLayer.style : window.storeLayer
); theLayer.left = x + oPix; theLayer.top = y + oPix; }
function setDragable(id)
{
//Rend une cellule bougeable dans la page: etant donné que dans la version
actuelle de Webdev (7),
//chaque "cellule" est une div contenant un tableau, et que c'est le tableau
qui possède
//l'id= nom de la cellule en majuscule (exemple CelluleDétail->CELLULEDETAIL),
il faut appeler le
//parentNode pour pouvoir la balise div, et donc quelquechose de bougeable:
//pour mozilla & co
document.getElementById(id).parentNode.setAttribute("onmouseover","this.onmousedown=dragIsDown;");
//pour IE6
document.getElementById(id).parentNode.onmousedown=dragIsDown;
//PS: pas besoin de faire le test puisque l'un des 2, seul, ne fonctionne
pas
//(et au pire, on redéfinie 2 fois la même chose ou presque)
}