[jQuery] Drag, Drop and Ajax For Photo Album Maker

[dennis]

MY GOAL:
I'm modifying the Interface 1.2 Shopping Cart to become
a photo picker to create photo albums. I have the basic
drag/drop working. I need to add these using ajax:
-- 'Search photos by tag'
-- 'send photo id to server on drop'
-- 'remove photo id from server on remove'

THE PROBLEM:
I have the separate pieces working, but I'm not sure how
to weave them together (still very new to jQuery). For
example, when I add my 'Search photos by tag' ajax function
to the drag and drop page search works fine, but drag/drop
stops working.

THE CODE:

This is kinda long, hope that's ok. I'll just show
the search function, ask later about the other functions
if I'm still stuck.

My ajax search form and code are in
<div id="searchAlbumPhotos">.

Thumbnails matching the search tag show up in
<div id="theSearchResultImages">.

////////////////////////////////////////////
<script type="text/javascript">
$(document).ready(
  function()
  {
    $('#theSearchResultImages a')
      .bind(
        'click',
        function() {
          $(this.parentNode)
            .TransferTo(
              {
                to:addImageToCart(this.parentNode),
                className:'transferImage',
                duration: 400
              }
            );
          return false;
        }
      );
    $('div.image').Draggable({revert: true, fx: 300, ghosting: true,
opacity: 0.4});
    $('#cart').Droppable(
      {
        accept :     'image',
        activeclass: 'activeCart',
        hoverclass:  'hoverCart',
        tolerance:   'intersect',
        onActivate:   function(dragged)
        {
          if (!this.shakedFirstTime) {
            $(this).Shake(3);
            this.shakedFirstTime = true;
          }
        },
        onDrop:      addImageToCart
      }
    );
  }
);
var addImageToCart = function(dragged)
{
  var cartItem;
  var imageName = $('h2', dragged).html();
  var photoID = parseFloat($('span', dragged).html());
  var imageId = $(dragged).attr('id');
  var imageSrc = $('img',dragged).attr('src');
  var isInCart = $('#' + imageId + '_cart');
  if (isInCart.size() == 1) {
    var quantity = parseInt(isInCart.find('span.quantity').html()) +
0;
    isInCart.find('span.quantity').html(quantity
+'').end().Pulsate(300, 2);
    cartItem = isInCart.get(0);
  } else {
    $('#cartImages')
      .append('<div class="imageCart" id="' + imageId + '_cart">' +
imageName + '<br />' + '<img src="' + imageSrc + '">' + '<br /><a
href="#">remove</a><br />qty: <span class="quantity">1</span><br /
>Photo ID: <span class="price">' + photoID + '</span></div>')
      .find('div.imageCart:last')
      .fadeIn(400)
      .find('a')
      .bind(
        'click',
        function(){
          $(this.parentNode).DropOutDown(
            400,
            function() {
              $(this).remove();
              calculateCartTotal();
            }
          );
          return false;
        }
      );
    cartItem = $('div.imageCart:last').get(0);
  }
  calculateCartTotal();
  return cartItem;
};
var calculateCartTotal = function()
{
  var total = 0;
  $('#cartImages .imageCart').each(
    function()
    {
      var quantity = parseInt($('span.quantity', this).html());
      total += quantity;
    }
  );
  $('#cartTotal').html(total);
  $('#cart p').Highlight(500, '#ff0', function(){$
(this).css('backgroundColor', 'transparent');});
};
</script>
<div id="cart" class="cart">
  <h3>Image cart :: Total Images: <span id="cartTotal">0</span></h3>
  <div id="cartImages"></div>
</div>

<div id="theSearchResultImages">
// thumbnails show up here, with id=someinteger and class=image
</div>

<div id="searchAlbumPhotos">
<p><strong>Search Photos by Tags</strong> - space separated</p>
<p><form action="/jsrpc/search_photos_by_tags"
        onsubmit='$.ajax({url: "/jsrpc/search_photos_by_tags",
                  data: $(this.elements).serialize(),
                  success: function(response){$
("#theSearchResultImages").html(response);},
                  dataType: "html"});
                  return false;' method="POST" >
<br />
<input type="text" name="tagname" value="" />&nbsp;
<input type="submit" name="submit" value="+" />
</form>
</p>
<p>&nbsp;</p>
</div>
<div style="overflow: hidden; position: absolute; display: none;
cursor: move; list-style-type: none; list-style-image: none; list-
style-position: outside;" id="dragHelper"></div>