When you choose a preview link of following main.html, in Ajax.updater, sub.html is read. In sub.html, I come by drag & drop in an object. However, become the error in a drug when you carry out two times of previews in ,IE. What's wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="prototype.js" type="text/javascript"></script>
<title>test</title>
<style type="text/css">
#dnd-ajax DIV.dropzone {
MARGIN: 20px; WIDTH: 92px; HEIGHT: 65px
}
DIV.draggable {
BORDER-RIGHT: dimgray 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: dimgray 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; BORDER-LEFT: dimgray 1px solid; WIDTH: 80px; CURSOR: move; PADDING-TOP: 5px; BORDER-BOTTOM: dimgray 1px solid; HEIGHT: 53px; BACKGROUND-COLOR: white
}
</style>
</head>
<body>
<form id="test" action="main.html" method="post">
<a
onclick="new Ajax.Updater( 'preview' , 'sub.html' , {asynchronous:true, evalScripts:true, method:'post' , onComplete:function(request){Element.scrollTo('preview')}, parameters:Form.serialize('test')}); return false;"
href="main.html">preview</a>
</form>
<div id="preview">
</div>
<script src="jquery-1.2.1.min.js" type="text/javascript">
</script>
<script src="jquery.dimensions.js" type="text/javascript">
</script>
<script src="ui.mouse.js" type="text/javascript">
</script>
<script src="ui.draggable.js" type="text/javascript">
</script>
<script src="ui.draggable.ext.js" type="text/javascript">
</script>
<script src="ui.droppable.js" type="text/javascript">
</script>
<script src="ui.droppable.ext.js" type="text/javascript">
</script>
<script type="text/javascript">
(function() {
jQuery(function() {
jQuery.noConflict();
});
}());
</script>
sub.html
<div>
<table class="question" border="1">
<tbody>
<tr>
<td>
<table class="ans" border="1">
<tbody>
<tr>
<td>
<div class="dropzone" id="ans0">
Drop here
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table class="opt" border="1">
<tbody>
<tr>
<td>
<div class="dropzone" id="tmp0">
You Can Drag this
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
(function() {
var optDropzone = {
tolerance: 'pointer',
hoverClass: 'dragenter',
accept: '.draggable',
drop: function(e, ui) {
if (jQuery(this).children().length == 0) {
jQuery(this).append(jQuery(ui.draggable.element));
}
}
}
var optDraggable = {
opacity: 0.5,
stop: function(e, ui) {
jQuery(ui.draggable.element).css({
position: 'static', left: 0, top: 0
});
}
}
jQuery(function() {
jQuery.noConflict();
jQuery('.dropzone').droppable(optDropzone);
jQuery('.draggable').draggable(optDraggable);
});
}());
</script>
</body>
</html>