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. --~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 <d...-qrf20pp95eSLQvtTh0HkdajZmZ73YKuj@public.gmane.org> 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--~--~---------~--~----~------------~-------~--~----~ 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
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 <d...-qrf20pp95eSLQvtTh0HkdajZmZ73YKuj@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---
Hi Dave, Thanks again for your reply. I;ve only just had a chance to try this. On 17 May, 13:45, Dave Crane <d...-qrf20pp95eSLQvtTh0HkdajZmZ73YKuj@public.gmane.org> 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 <d...-qrf20pp95eSLQvtTh0HkdajZmZ73YKuj@public.gmane.org> 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 rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org To unsubscribe from this group, send email to rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org For more options, visit this group at http://groups.google.com/group/rubyonrails-spinoffs?hl=en -~----------~----~----~----~------~----~------~--~---