Droppable + Draggable and destroy
Hi everybody!
I am having a big trouble with the droppable and draggable object
I have a table with some divs in the cell that I would like to be
draggable and the cells (<td>) to be droppables, then after that a div
has been dropped I want to clear the table cell and re-create the
nodes in the cells.
With firefox no problemo everythings is alright, but with IE7, IE8 I
have a javascript error!
So I search on the web and I found some subject talking about this. So
I tried many ways to destroy the draggable object when dropping the
div (like in the exemple bellow) but I am not able to find a solution
that doesn't send me a javascript error in Internet Explorer...
Can anyone help me? What did I do wrong?
Here is my exemple
<!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" />
<meta name="generator" content="" />
<meta name="description" content="desc" />
<meta name="keywords" content="keys" />
<title>BUG test</title>
<style type="text/css">
table { border-style: none;border-collapse: collapse; }
table td, table th { border-collapse: collapse; border-style:
inset; border: 1px solid #ddd; width: 200px; }
table td { height: 120px; }
.block {width: 100px; height: 40px; border: 1px solid #000;
background: #FFFF99; }
.ui-state-active { background: #ddd;}
</style>
<!-- Including the required javascript files -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript">
$(function(){
// Adding the Draggable and droppable effect
$('.block').draggable(
{
containment: '#main-table',
start: function()
{
$(this).css({zIndex: 999});
$(this).fadeTo(1, 0.50);
},
stop: function(event, ui)
{
$(this).fadeTo(1, 1);
}
});
$(".droppable").droppable({
accept: '.block',
hoverClass: 'ui-state-active',
drop: function(event, ui)
{
$(ui.draggable).draggable('destroy');
dropEvent();
}
});
});
function dropEvent()
{
// Cleaning the table cells
$('#main-table td').empty();
}
</script>
</head>
<body>
<table id="main-table" cellpadding="0" cellspacing="0" style="width:
1000px;">
<tr>
<th>Cell 1</th>
<th>Cell 2</th>
<th>Cell 3</th>
<th>Cell 4</th>
<th>Cell 5</th>
<th>Cell 6</th>
<th>Cell 7</th>
</tr>
<tr valign="top">
<td style="height: 116px;" id="cell_1" class="droppable">
<div class="block"></div>
</td>
<td style="height: 116px;" id="cell_2" class="droppable"></td>
<td style="height: 116px;" id="cell_3" class="droppable"></td>
<td style="height: 116px;" id="cell_4" class="droppable"></td>
<td style="height: 116px;" id="cell_5" class="droppable"></td>
<td style="height: 116px;" id="cell_6" class="droppable"></td>
<td style="height: 116px;" id="cell_7" class="droppable"></td>
</tr>
</table>
</body>
</html>
Thanks a lot!
Best,
David