Problemy z pozycjonowaniem przeciągnij i upuść JQuery

Question

Mam problemy z funkcją przeciągania i upuszczania i mam nadzieję, że ktoś może pomóc. Zasady w skrócie to:

1. „etapu” (.stage) od której nie może być więcej niż może przyjąć sklonowany .pageControl. Jest to jedyna klasa, którą może zaakceptować.

2. Po upuszczeniu na scenę, .pageControl staje się .pageControlDropped i może akceptować sklonowane .wfcControl. Jest to jedyna klasa, którą może zaakceptować.

3. Po usunięciu .wfcControl, zostaje on zastąpiony nowym html i staje się .wfcControlDropped.

Moje problemy to:

1. Gdy przeciągam sklonowany .pageControl do .stage, to przeskakuje do pozycji na .stage że nie jest to pozycja jestem upuszczenie go. Mogę przeciągnąć go z powrotem tam, gdzie chcę, ale musi spaść tam, gdzie go upuszczę. Próbowałem pozycjonowania CSS, ale wydaje się działać na .pageControl. Raz .pageControl -> .pageControlDropped, przeskakuje do innej pozycji. Ponadto, nie jest to płynny opór, jak w przykładach. Jeśli przeciągnę wiele .pageControls do .stage, każdy z nich powinien zaakceptować .wfcControl. Ale wygląda na to, że tylko pierwsza .pageControl (teraz .pageControlDropped) je otrzymuje. Nie mogę uzyskać drugiej .pageControlDropped, aby ją odebrać.

2. Jak uzyskać kolejne .pageControl, aby nie nakładać istniejących na .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; 
       } 
      }); 

wreszcie 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> 

Dzięki za wszelką pomoc w tej sprawie.

Answer 1

To powinno Ci na dobrej drodze:

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

Daj mi znać, jeśli miał jakikolwiek pytania