Hi Luke, It's not in the wiki docs for Sortable, but it is under
http://wiki.script.aculo.us/scriptaculous/show/draggable although the docs don't actually say much. My answer was based on reading the source code for dragdrop.js - the Sortable passes data through to an array called options_for_draggable (see lines 639-51 in scriptaculous-1.7.0, which is the copy open in my editor right now...just search for the var name if you've got an older version, or giving the latest beta a test drive). OK, my earlier answer was slightly off - you don't pass an Effect object in, but a callback function that takes the target element as an argument, which by default creates the effect when called. The default starteffect in 1.7.0 (dragdrop.js:257-61) looks like this: function(element){ element._opacity = Element.getOpacity(element); Draggable._dragging[element] = true; new Effect.Opacity(blah); } Some of this looks like housekeeping stuff, which you'd want to keep - notably the second line. So you'd want to pass in a different function at startup, and carry over the necessary housekeeping code. Say you want to turn it red when it starts, and then revert back to the original background color when the drag ends. So, modifying your example code: Sortable.create( 'item_list', { constraint:'vertical', onUpdate : updateOrder, handle: 'dragger', starteffect:function(element){ element._bgcolor=Element.style.backgroundColor; Draggable._dragging[element] = true; element.style.backgroundColor="red"; }, endeffect:function(element){ Draggable._dragging[element] = false; element.style.backgroundColor=Element._bgcolor; } }); When the effect starts, we stuff the original bg color as an expando property on the DOM element, and then set it back to the original value on the endeffect. Of course, if you know that the dragged elements will always be yellow, say, then you could take a simpler route... And if you want to change several style properties, have a look at Element.setStyle()... This just typed in to my email editor, I haven't tested it for typos, etc. HTH Dave On Thursday 17 May 2007 12:49, lukemack wrote: > Many thanks for your reply, Dave. How do I pass them to the > Sortable.create function though? I cant see anything in the api docs: > > http://wiki.script.aculo.us/scriptaculous/show/Sortable.create > > On 17 May, 10:44, Dave Crane <[EMAIL PROTECTED]> wrote: > > Hi Luke, > > > > You can pass Effects objects in to the drag/drop options argument, named > > starteffect and endeffect. By default, these set/unset opacity to 50% > > over 2/10 second, but you could use these to change color, apply a CSS > > class, or whatever. The options can be used in both the low-level > > Draggables and in the Sortable. > > > > HTH > > > > Dave > > > > On Thursday 17 May 2007 10:24, lukemack wrote: > > > hi. i've created some drag and drop functionality for re-ordering a > > > top-ten of items in a mysql database from php. this works fine but i > > > want to make the item being dragged a different colour. i've tried the > > > ghosting option but this isnt giving me enough contrast. i'm using > > > Sortaable.create in scriptaculous. anyone know how to do this? So far > > > I have: > > > > > > <script type="text/javascript"> > > > Sortable.create('item_list', {constraint:'vertical',onUpdate : > > > updateOrder, ghosting:true, handle: 'dragger'}); > > > > > > function updateOrder(){ > > > var options = { > > > method : 'post', > > > parameters : Sortable.serialize('item_list') > > > }; > > > new Ajax.Request('/toptens/update', options); > > > > > > } > > > > > > function refresh() { > > > > > > window.location.reload( true ); > > > } > > > </script> > > > > > > I have tried using onChange and hoverclass but could not get this to > > > work. > > > > > > any ideas? > > > > > > thanks, > > > > > > lukemack. > > > > > > -- > > > This email has been verified as Virus free > > > Virus Protection and more available athttp://www.plus.net > > > > -- > > ---------------------- > > Author > > Ajax in Actionhttp://manning.com/crane > > Ajax in Practicehttp://manning.com/crane2 > > Prototype & Scriptaculous in Actionhttp://manning.com/crane3 > > > > > -- > This email has been verified as Virus free > Virus Protection and more available at http://www.plus.net ------------------------------------------------------- -- ---------------------- Author Ajax in Action http://manning.com/crane Ajax in Practice http://manning.com/crane2 Prototype & Scriptaculous in Action http://manning.com/crane3 --~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups "Ruby on Rails: Spinoffs" 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/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
