title: jQuery Draggable + Droppable + nesting
body: <p>I am completely new to jQuery, but have managed to put together a nice little app that drags, drops, and rotates items. </p>
  
  <p>Looking for any guidance suggestions on finding a function that would let me do the following (apologize for any terminology issues):</p>
  
  <ul>
  <li>Create a div that is the droppable, such as a small box (done)</li>
  <li>Create a div that is the draggable, such as an icon (done)</li>
  <li>Drag the icon into the larger div</li>
  <li>Then be able to drag the larger div while also carrying the icons, and doing an AJAX post to my PHP script on everything that is moved.</li>
  </ul>
  
  <p>I found this: <a href="http://boagworld.com/dev/creating-a-draggable-sitemap-with-jquery/" rel="nofollow">http://boagworld.com/dev/creating-a-draggable-sitemap-with-jquery/</a> however, it snaps everything to the structure, and doesn`t really allow free movement. I also couldn't figure out which function in there causes the parent to move the child.</p>
  
  <p>Thanks for any guidance, articles, or links to examples! A couple days of searching in my downtime has not led to anything.</p>
  
  <p>Here are some code snippets from my project:</p>
  
  <p>Parent item:</p>
  
  <pre><code>  $( ".box" ).resizable({
  stack: "#set .box",
  start: function(){
      ifr = $('iframe');
      var d = $('&lt;div&gt;&lt;/div&gt;');
  
      $('.room').append(d[0]);
      d[0].id = 'temp_div';
      d.css({position:'absolute'});
      d.css({top: ifr.position(), left:0});
      d.height(ifr.height());
      d.width('100%');
  },
  stop: function(event, ui) {
        var w = ui.size.width;
        var h = ui.size.height;
        var hdvzth = ui.helper.data("hdvzth");
        var fid = ui.helper.data("fid");
        var rid = ui.helper.data("rid");
        var hid = ui.helper.data("hid");
            $.ajax({
                type: "POST",
                url: "&lt;?php print $position; ?&gt;",
                data: { h: h, w: w,  fid:fid, hid:hid, rid:rid }
              }).done(function( msg ) {});
      $('#temp_div').remove();
  
  
        }
  }
  
  
  ).draggable({
  
    stop: function(event, ui) {
  
        var pos_x = ui.position.left;
        var pos_y = ui.position.top;
        var hdvzth = ui.helper.data("hdvzth");
        var hid = ui.helper.data("hid");
        var fid = ui.helper.data("fid");
        var rid = ui.helper.data("rid");
  
        //Do the ajax call to the server
        $.ajax({
            type: "POST",
            url: "&lt;?php print $position; ?&gt;",
            data: { x: pos_x, y: pos_y, fid:fid, rid:rid, hid:hid }
          }).done(function( msg ) { });
    }
  });
  </code></pre>
  
  <p>Child Item, aka "icon":</p>
  
  <pre><code>$( ".piece" ).resizable({
  
  stack: "#set .piece",
  start: function(){
      ifr = $('iframe');
      var d = $('&lt;div&gt;&lt;/div&gt;');
  
      $('.piece').append(d[0]);
      d[0].id = 'temp_div';
      d.css({position:'absolute'});
      d.css({top: ifr.position(), left:0});
      d.height(ifr.height());
      d.width('100%');
  },
  stop: function(event, ui) {
  
        var x = ui.position.left;
        var y = ui.position.top;
        var w = ui.size.width;
        var h = ui.size.height;
        var hdvzth = ui.helper.data("hdvzth");
        var fid = ui.helper.data("fid");
        var pid = ui.helper.data("pid");
        var hid = ui.helper.data("hid");
            $.ajax({
                type: "POST",
                url: "&lt;?php print $position; ?&gt;",
                data: { h: h, w: w, x: x, y: y, fid:fid, hid:hid, pid:pid }
              }).done(function(msg){});
              $('#temp_div').remove();
        }
  }).draggable({
  
    stop: function(event, ui) {
  
        var pos_x = ui.position.left;
        var pos_y = ui.position.top;
        var pid = ui.helper.data("pid");
        var hid = ui.helper.data("hid");
        var fid = ui.helper.data("fid");
  
        $.ajax({
            type: "POST",
            url: "&lt;?php print $position; ?&gt;",
            data: { x: pos_x, y: pos_y, fid:fid, pid:pid, hid:hid }
          }).done(function( msg ) {});
    }
  });
  </code></pre>