ThunderPsycho
Messages postés180Date d'inscriptionlundi 3 juin 2002StatutMembreDernière intervention 4 février 2007
-
9 juin 2003 à 14:04
cirkooo
Messages postés35Date d'inscriptionsamedi 23 juin 2007StatutMembreDernière intervention26 décembre 2012
-
8 juin 2009 à 01:33
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
cs_bobabar
Messages postés12Date d'inscriptionmercredi 8 décembre 2004StatutMembreDernière intervention 8 avril 2013 15 mai 2007 à 16:33
Je n'ai pas réussi à le faire fonctionner que ce soit sous IE 6 ou FireFox 2.0 (pris les fichiers du .zip).
A+
atlante34
Messages postés14Date d'inscriptionlundi 16 janvier 2006StatutMembreDernière intervention24 janvier 2012 23 mai 2006 à 10:19
merci Marcial,
Il est vrai qu il est mieux de faire bouger directement le div.
Merci de ton code
A++
cs_Marcial
Messages postés57Date d'inscriptionsamedi 3 mai 2003StatutMembreDernière intervention31 juillet 2008 6 avril 2006 à 09:23
Bon code...
J'ai mis 8 car on sent l'effort et la recherche.
(sinon cela mérite un 7)
J'aurais mis 9/10 si le calque permettant le déplacement avait été dans le calque déplacé...
<script language='JavaScript'>
var dom = (document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dd_mode='';
function onoffdisplay(){
if (ie4) {
if (cadre_contenu.style.display=='') cadre_contenu.style.display='none'
else cadre_contenu.style.display=''
}else if (dom) {
if (document.getElementById('cadre_contenu').style.display=='') document.getElementById('cadre_contenu').style.display='none'
else document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
if (document.layers.cadre_contenu.visibility=='show') document.layers.cadre_contenu.visibility='hide'
else document.layers.cadre_contenu.visibility='show'
}
}
function changer_image(ima) {
if (ie4) {
visual.src=ima;
cadre_contenu.style.display=''
}else if (dom) {
document.getElementById('visual').src=ima;
document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
document.layers.visual.visibility=ima;
document.layers.cadre_contenu.visibility='show'
}
}
function start() {
var h=100;
if (ie4) {
var w=document.body.clientWidth-200;
w=50;
cadre_barre.style.left=w;
cadre_barre.style.top=h;
cadre_contenu.style.left=w;
cadre_contenu.style.top=h+30;
cadre_contenu.style.display='none';
cadre_barre.onmousedown=beginDrag;
}else if (dom) {
var w=window.outerWidth-200;
w=0
document.getElementById('cadre_barre').style.left=w;
document.getElementById('cadre_barre').style.top=h;
document.getElementById('cadre_contenu').style.left=w;
document.getElementById('cadre_contenu').style.top=h+30;
document.getElementById('cadre_contenu').style.display='none';
document.getElementById('cadre_barre').addEventListener('mousedown',beginDrag, false);
}else if (ns4) {
var w=window.outerWidth-200;
w=0
document.layers.cadre_barre.left=w;
document.layers.cadre_barre.top=h;
document.layers.cadre_contenu.left=w;
document.layers.cadre_contenu.top=h+30;
document.layers.cadre_contenu.visibility='hide'
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=beginDrag;
}
}
function doDrag(e) {
if (ie4) {
var difX=event.clientX-window.lastX;
var difY=event.clientY-window.lastY;
var newX1 = parseInt(cadre_barre.style.left)+difX;
var newY1 = parseInt(cadre_barre.style.top)+difY;
cadre_barre.style.left=newX1+'px';
cadre_barre.style.top=newY1+'px';
cadre_contenu.style.left=newX1+'px';
cadre_contenu.style.top=newY1+30+'px';
window.lastX=event.clientX;
window.lastY=event.clientY;
}else if (dom) {
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
var newX1 = parseInt(document.getElementById('cadre_barre').style.left)+difX;
var newY1 = parseInt(document.getElementById('cadre_barre').style.top)+difY;
document.getElementById('cadre_barre').style.left=newX1+'px';
document.getElementById('cadre_barre').style.top=newY1+'px';
document.getElementById('cadre_contenu').style.left=newX1+'px';
document.getElementById('cadre_contenu').style.top=newY1+30+'px';
window.lastX=e.clientX;
window.lastY=e.clientY;
}else if (ns4) {
var difX=e.pageX-window.lastX;
var difY=e.pageY-window.lastY;
var newX1 = parseInt(document.layers.cadre_barre.left)+difX;
var newY1 = parseInt(document.layers.cadre_barre.top)+difY;
document.layers.cadre_barre.left=newX1;
document.layers.cadre_barre.top=newY1;
document.layers.cadre_contenu.left=newX1;
document.layers.cadre_contenu.top=newY1+30;
window.lastX=e.pageX;
window.lastY=e.pageY;
}
}
function beginDrag(e) {
if (ie4) {
window.lastX=event.clientX;
window.lastY=event.clientY;
document.onmousemove=doDrag;
document.onmouseup=endDrag;
// if (event.srcElement.id=='cadre_barre'){
// Récup de l'Id d'un élément sous IE
// }
}else if (dom) {
window.lastX=e.clientX;
window.lastY=e.clientY;
window.onmousemove=doDrag;
window.onmouseup=endDrag;
myattr=e.target.getAttribute('ID');
// if(myattr=='cadre_barre') {
// Récup de l'ID d'un élément sous NS6
// }
}else if (ns4) {
window.lastX=e.pageX;
window.lastY=e.pageY;
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=doDrag;
document.captureEvents(Event.MOUSEUP)
document.onmouseup=endDrag;
}
}
function endDrag(e) {
if (ie4 || ns4) {
document.onmousemove=null;
}else if (dom) {
window.onmousemove=null;
}else if (ns4) {
alert('endDrag');
document.onmousemove=null;
}
}
</script>
</head>
<script language='JavaScript'>
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dom = (document.getElementById)? true:false;
if ((dom) || (ie4)) {
document.write("
ici pour deplacer la mini fenetre |<gras>[# image 1 .gif]
[# image 2 .gif]
</html>
ThunderPsycho
Messages postés180Date d'inscriptionlundi 3 juin 2002StatutMembreDernière intervention 4 février 2007 9 juin 2003 à 14:04
8 juin 2009 à 01:33
8 sept. 2007 à 11:32
j'ai trouvé un code similaire, ici : http://i.gautier.free.fr/jsprof/scripts/r6.htm
15 mai 2007 à 16:33
A+
23 mai 2006 à 10:19
Il est vrai qu il est mieux de faire bouger directement le div.
Merci de ton code
A++
6 avril 2006 à 09:23
J'ai mis 8 car on sent l'effort et la recherche.
(sinon cela mérite un 7)
J'aurais mis 9/10 si le calque permettant le déplacement avait été dans le calque déplacé...
ce qui aurais donné le code suivant...
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=iso-8859-1'>
<title>dsdsd</title>
<style>
<!--
.drag {
position:relative; cursor:hand
}
//-->
.barre_titre {
background-color:#FFFFFF; position:absolute; top:0; left:0;
}
.barre_contenu {
position:absolute; top:30; left:0; background-color:#FFFFFF;
}
.table_titre {
border-width:1px; border-color:rgb(102,102,102); border-style:solid;
}
.table_contenu {
border-width:1px; border-color:rgb(102,102,102); border-style:solid;
}
</style>
<script language='JavaScript'>
var dom = (document.getElementById)? true:false;
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dd_mode='';
function onoffdisplay(){
if (ie4) {
if (cadre_contenu.style.display=='') cadre_contenu.style.display='none'
else cadre_contenu.style.display=''
}else if (dom) {
if (document.getElementById('cadre_contenu').style.display=='') document.getElementById('cadre_contenu').style.display='none'
else document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
if (document.layers.cadre_contenu.visibility=='show') document.layers.cadre_contenu.visibility='hide'
else document.layers.cadre_contenu.visibility='show'
}
}
function changer_image(ima) {
if (ie4) {
visual.src=ima;
cadre_contenu.style.display=''
}else if (dom) {
document.getElementById('visual').src=ima;
document.getElementById('cadre_contenu').style.display=''
}else if (ns4) {
document.layers.visual.visibility=ima;
document.layers.cadre_contenu.visibility='show'
}
}
function start() {
var h=100;
if (ie4) {
var w=document.body.clientWidth-200;
w=50;
cadre_barre.style.left=w;
cadre_barre.style.top=h;
cadre_contenu.style.left=w;
cadre_contenu.style.top=h+30;
cadre_contenu.style.display='none';
cadre_barre.onmousedown=beginDrag;
}else if (dom) {
var w=window.outerWidth-200;
w=0
document.getElementById('cadre_barre').style.left=w;
document.getElementById('cadre_barre').style.top=h;
document.getElementById('cadre_contenu').style.left=w;
document.getElementById('cadre_contenu').style.top=h+30;
document.getElementById('cadre_contenu').style.display='none';
document.getElementById('cadre_barre').addEventListener('mousedown',beginDrag, false);
}else if (ns4) {
var w=window.outerWidth-200;
w=0
document.layers.cadre_barre.left=w;
document.layers.cadre_barre.top=h;
document.layers.cadre_contenu.left=w;
document.layers.cadre_contenu.top=h+30;
document.layers.cadre_contenu.visibility='hide'
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=beginDrag;
}
}
function doDrag(e) {
if (ie4) {
var difX=event.clientX-window.lastX;
var difY=event.clientY-window.lastY;
var newX1 = parseInt(cadre_barre.style.left)+difX;
var newY1 = parseInt(cadre_barre.style.top)+difY;
cadre_barre.style.left=newX1+'px';
cadre_barre.style.top=newY1+'px';
cadre_contenu.style.left=newX1+'px';
cadre_contenu.style.top=newY1+30+'px';
window.lastX=event.clientX;
window.lastY=event.clientY;
}else if (dom) {
var difX=e.clientX-window.lastX;
var difY=e.clientY-window.lastY;
var newX1 = parseInt(document.getElementById('cadre_barre').style.left)+difX;
var newY1 = parseInt(document.getElementById('cadre_barre').style.top)+difY;
document.getElementById('cadre_barre').style.left=newX1+'px';
document.getElementById('cadre_barre').style.top=newY1+'px';
document.getElementById('cadre_contenu').style.left=newX1+'px';
document.getElementById('cadre_contenu').style.top=newY1+30+'px';
window.lastX=e.clientX;
window.lastY=e.clientY;
}else if (ns4) {
var difX=e.pageX-window.lastX;
var difY=e.pageY-window.lastY;
var newX1 = parseInt(document.layers.cadre_barre.left)+difX;
var newY1 = parseInt(document.layers.cadre_barre.top)+difY;
document.layers.cadre_barre.left=newX1;
document.layers.cadre_barre.top=newY1;
document.layers.cadre_contenu.left=newX1;
document.layers.cadre_contenu.top=newY1+30;
window.lastX=e.pageX;
window.lastY=e.pageY;
}
}
function beginDrag(e) {
if (ie4) {
window.lastX=event.clientX;
window.lastY=event.clientY;
document.onmousemove=doDrag;
document.onmouseup=endDrag;
// if (event.srcElement.id=='cadre_barre'){
// Récup de l'Id d'un élément sous IE
// }
}else if (dom) {
window.lastX=e.clientX;
window.lastY=e.clientY;
window.onmousemove=doDrag;
window.onmouseup=endDrag;
myattr=e.target.getAttribute('ID');
// if(myattr=='cadre_barre') {
// Récup de l'ID d'un élément sous NS6
// }
}else if (ns4) {
window.lastX=e.pageX;
window.lastY=e.pageY;
document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=doDrag;
document.captureEvents(Event.MOUSEUP)
document.onmouseup=endDrag;
}
}
function endDrag(e) {
if (ie4 || ns4) {
document.onmousemove=null;
}else if (dom) {
window.onmousemove=null;
}else if (ns4) {
alert('endDrag');
document.onmousemove=null;
}
}
</script>
</head>
<script language='JavaScript'>
var ns4 = (document.layers)? true:false;
var ie4 = (document.all)? true:false;
var dom = (document.getElementById)? true:false;
if ((dom) || (ie4)) {
document.write("
ici pour deplacer la mini fenetre |<gras>[# image 1 .gif]
[# image 2 .gif]
</html>
9 juin 2003 à 14:04