I'm trying to use the reverteffect option on a sortable and it's not doing what I would expect. My expectation is that the reverteffect would only be triggered if the object I'm dragging is dropped back where it started. What I'm seeing is that the reverteffect is triggered regardless of where I drop the object. I'm including a simple example below.
The question is, am I doing it wrong? Or am I not understanding what it's supposed to do? Either way, how can I trigger a function ONLY IF the object is dropped off where it started? Thanks! Here's my code: <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <title>script.aculo.us Sortable ghosting functional test file</ title> <meta http-equiv="content-type" content="text/html; charset=utf-8" / > <script src="prototype.js" type="text/javascript"></script> <script src="scriptaculous.js" type="text/javascript"></script> <script type="text/javascript"> var moveStartEffect = function(element) { element._opacity = Element.getOpacity(element); Draggable._dragging[element] = true; new Effect.Opacity(element, {duration:0.2, from:element._opacity, to: 0.7}); element.setStyle({backgroundColor:'#bfb'}); } var moveRevertEffect = function(element, top_offset, left_offset) { var dur = Math.sqrt(Math.abs(top_offset^2)+Math.abs(left_offset^2)) *0.02; new Effect.Move(element, { x: -left_offset, y: -top_offset, duration: dur, queue: {scope:'_draggable', position:'end'} }); element.setStyle({backgroundColor:'#fbf'}); } </script> <style> div#testlist { list-style-type:none; margin:0; padding:0; } div#testlist div.thingie { width:200px; font:12px Verdana; padding:4px; } div#testlist div.thingie .over { background-color:#fcb; } div#testlist div.thingie img { float:left; margin-right:8px; cursor:move; } </style> </head> <body> <h2>Drag and Drop Test</h2> http://zenofshen.com/posts/ajax-sortable-lists-tutorial <br /><br /> http://www.kavoir.com/2009/05/mysql-update-multiple-rows-with-one-single-query.html <br /><br /> http://www.sitepoint.com/forums/showthread.php?t=426070 <br /><br /> http://www.phpfreaks.com/forums/index.php?topic=236338.0 <div id="testlist"> <div class="thingie" id="item_7"><img src="down.gif" class="down" alt=""/> This is item No. 1</div> <div class="thingie" id="item_8"><img src="down.gif" class="down" alt=""/> This is item No. 2</div> <div class="thingie" id="item_9"><img src="down.gif" class="down" alt=""/> This is item No. 3</div> <div class="thingie" id="item_14"><img src="down.gif" class="down" alt=""/> This is item No. 4</div> <div class="thingie" id="item_15"><img src="down.gif" class="down" alt=""/> This is item No. 5</div> <div class="thingie" id="item_16"><img src="down.gif" class="down" alt=""/> This is item No. 6</div> </div> <p id="testlist_serialize">(waiting for onChange)</p> <script type="text/javascript" language="javascript" charset="utf-8"> Sortable.create('testlist', {ghosting:false,constraint:false,tag:'div',hoverclass:'over', handle:'down', starteffect:moveStartEffect, reverteffect:moveRevertEffect, onUpdate:function(sortable){alert(Sortable.sequence(sortable))}, onChange:function(element){$('testlist_serialize').innerHTML = Sortable.serialize(element.parentNode)} }); </script> </body> </html> --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Prototype & script.aculo.us" 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/prototype-scriptaculous?hl=en -~----------~----~----~----~------~----~------~--~---
