JQuery Arrastrar y soltar problemas de posicionamiento

Question

Tengo problemas con la función de arrastrar y soltar y espero que alguien pueda ayudar. Las reglas en pocas palabras son:

1. la "etapa" (.stage) de la cual no puede haber más de una puede aceptar clonado .pageControl. Es la única clase que puede aceptar.

2. Una vez colocado en .stage, .pageControl se convierte en .pageControlDropped y puede aceptar clonado .wfcControl. Es la única clase que puede aceptar.

3. Una vez que se suelta .wfcControl, se reemplaza con html nuevo y se convierte en .wfcControlDropped.

Mis problemas son:

1. Cuando arrastrar clonado .pageControl a .stage, salta a una posición en .stage que no es la posición que estoy dejándolo caer. Puedo arrastrarlo de vuelta a donde lo quiero, pero debe caer donde lo tiro. Intenté el posicionamiento CSS, pero parece funcionar en .pageControl. Una vez que .pageControl -> .pageControlDropped, salta a otra posición. Además, no es un arrastre muy fluido como en los ejemplos

2. Si arrastro varios .pageControles a .stage, cualquiera de ellos debería aceptar .wfcControl. Pero parece que solo el primer .pageControl (ahora .pageControlDropped) lo recibe. No puedo obtener el segundo .pageControlDropped para recibirlo.

3. ¿Cómo obtengo sucesivos .pageControl para no superponer los existentes en .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; 
       } 
      }); 

Por último, el 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> 

Gracias por cualquier ayuda en esto.

Answer 1

Esto debe conseguirle bien en su camino:

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

, hágamelo saber si usted tenía alguna preguntas