Hi Dave, Thanks again for your reply. I;ve only just had a chance to try this.
On 17 May, 13:45, Dave Crane <[EMAIL PROTECTED]> wrote: > 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 athttp://www.plus.net > > ------------------------------------------------------- > > -- > ---------------------- > Author > Ajax in Actionhttp://manning.com/crane > Ajax in Practicehttp://manning.com/crane2 > Prototype & Scriptaculous in Actionhttp://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 -~----------~----~----~----~------~----~------~--~---
