Creating and storing key/value pairs on drop of draggable elements

Creating and storing key/value pairs on drop of draggable elements


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 &raquo;</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