JQuery Drag and Drop positioning issues

Question

I am having issues with drag and drop functionality and I'm hoping someone can help. The rules in a nutshell are:

1. the "stage" (.stage) of which there can be more than one can accept cloned .pageControl. It is the only class it can accept.

2. Once dropped on .stage, .pageControl becomes .pageControlDropped and can accept cloned .wfcControl. It is the only class it can accept.

3. Once .wfcControl is dropped, it is replaced with new html and becomes .wfcControlDropped.

My problems are:

1. When I drag cloned .pageControl to .stage, it jumps to a position on .stage that is not the position I'm dropping it. I can drag it back to where I want it but it needs to drop where I drop it. I tried CSS positioning but it seems to work on .pageControl. Once .pageControl -> .pageControlDropped, it jumps to another position. Also, its not a very fluid drag like in the examples

2. If I drag multiple .pageControls to .stage, any of them should accept .wfcControl. But it seems like only the first .pageControl (now .pageControlDropped) receives it. I can't get the second .pageControlDropped to receive it.

3. How do I get successive .pageControl to not overlay existing ones on .stage?

CSS:

 <style type="text/css">
 .stage { margin-left: -.3em; width: 500px; height: 550px; padding: 0.0em;}
 .pageControl {height:15px; width:15px; background-color:#EAEEFF; border:1px solid blue;}
 .pageControlDropped {height:450px; width:600px;background-color:#F9FAFF;border:1px solid blue;}
 .wfcControl { }
 .wfcControlDropped {  }
 </style>

JQuery:

    $('.pageControl').draggable({
                helper: 'clone',
                snap: false,
                containment: '.stage',
                handle: '.wfcHandle',
                stop: function (event, ui) {
                    var pos = $(ui.helper).offset();
                    $(this).css({
                        "left": pos.left,
                        "top": pos.top
                    });
                }
            });
    $('.wfcControl').draggable({ helper: 'clone', containment: '.pageControlDropped' });
    $('.stage').droppable({
                accept: '.pageControl',
                greedy: true,
                drop: function (event, ui) {
                    $(this).append($(ui.helper).clone());
                    $('.stage .pageControl')
                        .removeClass('pageControl')
                        .addClass('pageControlDropped')
                        .resizable()
                        .draggable({
                            containment: '.stage',
                            handle: '.wfcHandle'
                        })
                        .droppable({
                            accept: '.wfcControl',
                            greedy: true,
                            drop: function (event, ui) {
                                switch (ui.helper[0].title) {
                                    case "Play Greeting Control":
                                        wfcControlDropped = wfcPlayGreetingControl
                                        break;
                                    case "Input Control":
                                        wfcControlDropped = wfcInputControl
                                        break;
                                }
                                $(this).append($(ui.helper).clone());
                                $('.pageControlDropped .wfcControl').replaceWith($(wfcControlDropped));
                                $('.pageControlDropped .wfcControlDropped')
                                    .draggable({
                                        containment: '.pageControlDropped'
                                    })
                            }
                        }).clone(false)

                    return false;
                }
            });

Finally, the HTML:

<div id = "divPageControl" title = "Page Control" class="pageControl">
   <table style = "width:100%" border = "0">
      <tr>
         <td colspan = "1" width = "100%"></td>
      </tr>
   </table>
</div>
<div id = "divInputControl" title = "Input Control" class="wfcControl" style="height:15px; width:15px; background-color:light green; border:1px solid green;">
   <table style = "width:100%" border = "0">
      <tr class = "wfcHandle">
         <td colspan = "1" width = "100%">&nbsp;</td>
      </tr>
    </table>
</div>

Thanks for any help on this.

Answer 1

This should get you WELL ON YOUR WAY:

HTML:

  <div class="pageControl"></div>
  <div class="wfcControl"></div>
  <div class="stage"> STAGE</div>
  <div class="stage"> STAGE</div>

JAVASCRIPT:

$('.pageControl,.wfcControl').draggable({
    helper:"clone",
    opacity:0.5
});

//=========================================
$('.stage').droppable(
  {
    tolerance: "fit",
    greedy:true,
    accept: ".pageControl",
    drop: function(e,ui){
      $(this).append(
        $(ui.draggable).clone()
        .css({
          position:"absolute",
    //IMPORTANT
          top: e.clientY-e.offsetY,
          left: e.clientX-e.offsetX
        })
        //note containment:parent => IMPORTANT
        .draggable({containment:"parent",
                    snap:true,
                    snapMode:"outer",
        //MY ATTEMPT TO STOP USERS FROM OVERLAPPING
                    snapTolerance:15
                   }) 
        .removeClass("pageControl")
        .addClass("pageControlDropped")
        .resizable()
        .droppable({
          accept: ".wfcControl",
          drop: function(ev,ui){
            $(this).append(
            $(ui.draggable).clone()
              .css({
                position:"absolute",
                top:ev.clientY-ev.offsetY-$(this).offset().top,
                left: ev.clientX-ev.offsetX - $(this).offset().left
              })
              //note containment:parent
              .draggable({containment:"parent"}) 
              .removeClass("wfcControl")
              .addClass("wfcControlDropped")      
      );    
    }

        })
      );    
    }
  }
);

DEMO: http://jsbin.com/orepew

Let me know if you had any questions