|
Mailing Lists
|
Home / Groups / JQuery
sort, drop, recycle and get back to sortI have been working on this for a couple of days now and get short on hair. Below is the code for the link provided. http://www.letsgetsomething.com/Utilities/sortable_work/sortable_sm.cfm As you can see I'm doing a lot in this. I'm sorting a grid, rotating images and dropping into a recycle bin, which all works. What I'm having problems with is getting what is in the recycle bin back in to the sort grid, one item at a time. Also, I'm getting the wrong icon image for the rotate once it is put into the recycle bin. Any help would be great! TIA <cfsetting showdebugoutput="no"> <!doctype html> <html lang="en"> <head> <title>Sort, Select, Rotate and Recycle</title> <link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet" /> <link type="text/css" href="css/jquery.tooltip.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript" src="js/jquery.ui.core.js"></script> <script type="text/javascript" src="js/jquery.ui.widget.js"></script> <script type="text/javascript" src="js/jquery.ui.mouse.js"></script> <script type="text/javascript" src="js/jquery.ui.sortable.js"></script> <script type="text/javascript" src="js/jquery.ui.draggable.js"></script> <script type="text/javascript" src="js/jquery.ui.droppable.js"></script> <script type="text/javascript" src="js/jquery.ui.resizable.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/jquery.rotate.1-1.js"></script> <style type="text/css"> #pdfdocument { list-style-type:none; margin:0; padding:0; } #pdfdocument li { cursor:move; margin:3px 3px 3px 0; float:left; width:154px; height:240px; padding:2px; text-align:left; } #rBin { list-style-type: none; margin: 0; padding: 0; } #rBin li { cursor:move; margin:3px 3px 3px 0; float:left; width:154px; height:240px; padding:2px; text-align:left; } #rBin { float:right; width:206px; min-height:18em; padding:1px;} * html #rBin { height:18em; } /* IE6 */ #rBin h4 { line-height:16px; margin:0 0 0.4em; } #rBin h4 .ui-icon { float:left; } #preview{ position:absolute; border:1px solid #ccc; background:#333; padding:5px; display:none; color:#fff; } .imgBorder {border:1px solid #666;} </style> <script type="text/javascript"> $(function() { $("#pdfdocument").sortable(); $("#pdfdocument").disableSelection(); $("#rBin").droppable({ accept: '#pdfdocument li', drop: function(event, ui) { deleteImage(ui.draggable); } }); $("#pdfdocument").droppable({ accept: '#rBin li', drop: function(ev, ui) { recycleImage(ui.draggable); } }); function deleteImage($item) { $item.fadeOut(function() { var $list = $('ul',$("#rBin")).length ? $('ul',$("#rBin")) : $('<ul class="ui-helper-reset" />').appendTo($("#rBin")); $item.appendTo($list).fadeIn("fast"); }); } function recycleImage($item) { var $list = $('ul',$("#pdfdocument")).length ? $('ul',$("#pdfdocument")) : $('<ul class="ui-helper-reset" />').appendTo($("#pdfdocument")); $item.fadeOut(function() { $item.appendTo($list).fadeIn("fast"); }); } }); function Rotate90(img){ var ov = parseInt($('#'+img+'rotation').val()); $('#'+img).rotateRight(90); $('#'+img).addClass('imgBorder'); if(parseInt($('#'+img).height()) > parseInt($('#'+img).width())){ $('#'+img+'holder').width(154); } else{ $('#'+img+'holder').width(200); } if (ov == 270){ $('#'+img+'rotation').val(0); } else{ $('#'+img+'rotation').val(ov + 90); } } </script> </head> <body> <table border="1"> <tr> <td style="vertical-align:top;"> <div id="rBin" class="ui-widget-content ui-state-default"> <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Recycle Bin</span> Recycle Bin</h4> </div> </td> <form name="sort" action="" method="post"> <td style="vertical-align:top; width:420px;"> <div> <ul id="pdfdocument"> <li id="image1holder" class="ui-state-default"> <a href="pdfimages/large_1003_page_3.jpg" class="preview" title="Page 1" onClick="return false;" style="cursor:not-allowed;"> <div style="font-size:12px; text-align:center;">Page 1</div> </a> <a class="ui-state-active ui-icon ui-icon-arrowrefresh-1-w" style="cursor:pointer;" title="Rotate Image" onClick="Rotate90('image1');"></a> <img id="image1" src="pdfimages/1003_page_3.jpg" class="imgBorder"> <input type="hidden" name="image1rotation" id="image1rotation" value="0"> <input type="hidden" name="PageOrder" id="PageOrder" value="1"> </li> <li id="image2holder" class="ui-state-default"> <a href="pdfimages/large_1004_page_4.jpg" class="preview" title="Page 2" onClick="return false;" style="cursor:not-allowed;"> <div style="font-size:12px; text-align:center;">Page 2</div> </a> <a class="ui-state-active ui-icon ui-icon-arrowrefresh-1-w" style="cursor:pointer;" title="Rotate Image" onClick="Rotate90('image2');"></a> <input type="hidden" name="image2rotation" id="image2rotation" value="0"> <img id="image2" src="pdfimages/1004_page_4.jpg" class="imgBorder"> <input type="hidden" name="PageOrder" id="PageOrder" value="2"> </li> <li id="image3holder" class="ui-state-default"> <a href="pdfimages/large_1005_page_5.jpg" class="preview" title="Page 3" onClick="return false;" style="cursor:not-allowed;"> <div style="font-size:12px; text-align:center;">Page 3</div> </a> <a class="ui-state-active ui-icon ui-icon-arrowrefresh-1-w" style="cursor:pointer;" title="Rotate Image" onClick="Rotate90('image3');"></a> <input type="hidden" name="image3rotation" id="image3rotation" value="0"> <img id="image3" src="pdfimages/1005_page_5.jpg" class="imgBorder"> <input type="hidden" name="PageOrder" id="PageOrder" value="3"> </li> <li id="image4holder" class="ui-state-default"> <a href="pdfimages/large_1006_page_6.jpg" class="preview" title="Page 4" onClick="return false;" style="cursor:not-allowed;"> <div style="font-size:12px; text-align:center;">Page 4</div> </a> <a class="ui-state-active ui-icon ui-icon-arrowrefresh-1-w" style="cursor:pointer;" title="Rotate Image" onClick="Rotate90('image4');"></a> <input type="hidden" name="image4rotation" id="image4rotation" value="0"> <img id="image4" src="pdfimages/1006_page_6.jpg" class="imgBorder"> <input type="hidden" name="PageOrder" id="PageOrder" value="4"> </li> </ul> </div> </td> </form> </tr> </table> <p> </p> </body> </html> |
February 12, 2012
|
Latest Fusion Authority Articles
|
|||||||||||||||||||||||||||||||||||||||||||||||||
