Yes I realize that this "?
dayDrop0=recipeThumb3&dayDrop1=recipeThumb0&dayDrop2...etc." is a
query string and not a cookie. Sorry, didn't proof-read my message
closely enough, I guess...
On Mar 2, 3:02 pm, jerome <jeromecoving...@gmail.com> wrote:
> In my interactions js file, I have set up draggables and droppables.
>
> $('.draggableRecipe').draggable({helper: 'clone'});
> $('.dayDrop').droppable({
> accept: '.draggableRecipe',
> drop: function(ev, ui) {
> ui.draggable.clone().fadeOut("fast",
> function() {
> $(this).fadeIn("fast")
> }).appendTo($(this).empty());
> }
> });
>
> Here is an excerpt of my HTML as it currently stands.
>
> <div id="recipeTray">
> <div id="sevenDaysBanner"><img src="images/7days_7dinners.gif"
> alt="7 Days 7 Dinners" title="7 Days 7 Dinners" width="134"
> height="53" /><br />Drag recipes from your collection to create your
> own weekly dinner plan.</div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb0"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb1"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb2"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb3"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb4"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb5"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb6"></div></div>
> <div class="clearBoth"></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb7"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb8"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb9"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb10"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb11"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb12"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb13"></div></div>
> <div class="clearBoth"></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb14"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb15"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb16"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb17"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb18"></div></div>
> <div class="recipeThumbContainer"><div class="draggableRecipe"
> id="recipeThumb19"></div></div>
> <div id="nextTwenty"><!--<a
> href="mp_tool_mockup1_page2.html">Next »</a>--></div>
> <div class="clearBoth"></div>
> <div id="weekOptions"><a href="#" id="select-week">Select
> week</a> | <a href="#" id="save-week">Save week</a> | <a href="#"
> id="clear-week">Clear week</a></div>
> </div>
> <div id="weekTray">
> <div class="dayOfWeek">
> <div class="dayLabel"><img id="sunday" src="images/
> 7days_sun_off.gif" alt="Sunday" width="78" height="27"
> title="Sunday" /></div>
> <div class="dayDrop"></div>
> </div>
> <div class="dayOfWeek">
> <div class="dayLabel"><img id="monday" src="images/
> 7days_mon_off.gif" alt="Monday" width="78" height="27"
> title="Monday" /></div>
> <div class="dayDrop"></div>
> </div>
> <div class="dayOfWeek">
> <div class="dayLabel"><img id="tuesday" src="images/
> 7days_tue_off.gif" alt="Tuesday" width="78" height="27"
> title="Tuesday" /></div>
> <div class="dayDrop"></div>
> </div>
> <div class="dayOfWeek">
> <div class="dayLabel"><img id="wednesday" src="images/
> 7days_wed_off.gif" alt="Wednesday" width="78" height="27"
> title="Wednesday" /></div>
> <div class="dayDrop"></div>
> </div>
> <div class="dayOfWeek">
> <div class="dayLabel"><img id="thursday" src="images/
> 7days_thu_off.gif" alt="Thursday" width="78" height="27"
> title="Thursday" /></div>
> <div class="dayDrop"></div>
> </div>
> <div class="dayOfWeek">
> <div class="dayLabel"><img id="friday" src="images/
> 7days_fri_off.gif" alt="Friday" width="78" height="27"
> title="Friday" /></div>
> <div class="dayDrop"></div>
> </div>
> <div class="dayOfWeek">
> <div class="dayLabel"><img id="saturday" src="images/
> 7days_sat_off.gif" alt="Saturday" width="78" height="27"
> title="Saturday" /></div>
> <div class="dayDrop"></div>
> </div>
> </div>
>
> On clicking a "save" button, I would like to send the values of what
> draggable elements are currently in what droppable elements. In other
> words, what recipeThumb# is currently in what droppable div. I know
> one step I would have to take is to give the droppable elements
> class"dayDrop" and id that could be stored in the cookie. So I'm
> thinking a cookie key/value pair would look something like:
>
> ?dayDrop0=recipeThumb3&dayDrop1=recipeThumb0&dayDrop2...etc.
>
> I'm going to want to send this string to the server to be stored in a
> db.
>
> To get me started, I just need to know some ways of triggering an
> event that would create these key/value pairs on drop and output the
> string on saving.
>
> Thanks in advance to anyone with some good ideas!
>
> Jerome
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to jquery-ui@googlegroups.com
To unsubscribe from this group, send email to
jquery-ui+unsubscr...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
