Cet exemple utilise mootools mais je vois le même comportement avec scriptaculous.Problème de div draggable dans IE7
J'ai une div avec du contenu, dans ce cas un seul X et il y a beaucoup d'espace blanc autour du contenu. Je fais glisser la div mais je trouve difficile de faire glisser la div dans IE. Dans IE, je dois cliquer et faire glisser directement sur le contenu de la div, le seul X. Si je clique dans la div, mais loin de la X, la div se trouve juste là.
Il se comporte comme prévu dans FF, Chrome et Safari.
Voici un exemple de travail complet avec mootools. Vous devrez mettre à jour les balises de script pour refléter ce que vous avez appelé vos bibliothèques mootools. (Sur modifier j'ai ajouté un exemple scriptaculous ainsi)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Mootools problem</title>
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="mootools-more.js"></script>
<style type="text/css">
#my-drag{
width: 100px;
height: 100px;
border: solid 1px black;
}
#my-drag p{
text-align: center;
}
</style>
<script type="text/javascript">
function start() {
var e = $('my-drag');
e.makeDraggable();
}
</script>
</head>
<body onload="start();">
<div id="my-drag">
<p>X</p>
</div>
</body>
</html>
est ici le même exemple en utilisant un prototype scriptaculous - même numéro
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>IE Drag problem</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>
<style type="text/css">
#my-drag{
width: 100px;
height: 100px;
border: solid 1px black;
}
#my-drag p{
text-align: center;
}
</style>
<script type="text/javascript">
function start() {
new Draggable('my-drag', { starteffect: null, endeffect: null }); ;
}
</script>
</head>
<body onload="start();">
<div id="my-drag">
<p>X</p>
</div>
</body>
</html>