Dieses Beispiel verwendet Mootools, aber ich sehe das gleiche Verhalten mit Scriptaculous.Draggable Div-Problem in IE7
Ich habe ein Div mit etwas Inhalt, in diesem Fall ein einzelnes X und es gibt viel Leerraum um den Inhalt. Ich mache das div ziehbar, aber ich finde es schwierig, das div in IE zu ziehen. Im IE muss ich direkt auf den Inhalt des div klicken und ziehen, das einzelne X. Wenn ich in das div klicke, aber weg vom X, dann sitzt das div einfach dort.
Es verhält sich wie erwartet in FF, Chrome und Safari.
Hier ist ein vollständiges Arbeitsbeispiel mit mootools. Sie müssen die Skript-Tags aktualisieren, um zu reflektieren, was Sie Ihre mootools-Bibliotheken genannt haben. (Auf Bearbeiten habe ich ein scriptaculous Beispiel auch)
<!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>
Hier ist das gleiche Beispiel mit Prototyp scriptaculous - gleiche Problem
<!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>