Okay so I manag to do something else by using the example http://jqueryui.com/demos/droppable/#photo-manager And now it works..
Here is my code <!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; vertical-align: top; } .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); }, helper: 'clone' }); $(".droppable").droppable({ accept: '.block', hoverClass: 'ui-state-active', drop: function(event, ui) { deleteImage(ui.draggable, $(this).attr('id')); } }); }); function deleteImage($item, cellId) { $item.appendTo($('#'+cellId)); } </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 id="salut" 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> But I would be so grateful if someone could explain me how this function works. function deleteImage($item, cellId) { $item.appendTo($('#'+cellId)); } So I understand that the node <div> is identified by $item, and then I append it to the cell, BUT how does it just move the node? where is the original node? I thought that appendTo function was to create nodes not move them.. What did I miss in my explanation? 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 -~----------~----~----~----~------~----~------~--~---
