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 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "jQuery UI" group. To post to this group, send email to [email protected] To unsubscribe from this group, send email to [email protected] For more options, visit this group at http://groups.google.com/group/jquery-ui?hl=en -~----------~----~----~----~------~----~------~--~---
