JQuery拖放定位問題

Question

我遇到拖放功能方面的問題，我希望有人可以提供幫助。概括地說的規則是：

1. 的「階段」（.stage），其中可以有一個以上的能夠接受克隆.pageControl。它是唯一可以接受的課程。

2. 一旦放在.stage上，.pageControl就會變成.pageControlDropped並且可以接受克隆的.wfcControl。它是唯一可以接受的課程。

3. 一旦.wfcControl被刪除，它將被替換爲新的html併成爲.wfcControlDropped。

我的問題是：

1. 當我拖克隆.pageControl到.stage，它跳到上.stage的位置，是不是我放棄它的位置。我可以將它拖回到我想要的位置，但它需要放在放下它的地方。我試過CSS定位，但似乎在.pageControl上工作。一旦.pageControl - > .pageControlDropped，它跳轉到另一個位置。另外，它不是一個非常流暢的拖動，如示例

2. 如果我將多個.pageControls拖到.stage，它們中的任何一個都應接受.wfcControl。但它似乎只有第一個.pageControl（現在.pageControlDropped）接收它。我無法獲得第二個.pageControlDropped來接收它。

3. 如何獲得連續的.pageControl不覆蓋現有的.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; 
       } 
      }); 

最後，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> 

感謝有這方面的幫助。

Answer 1

這應該讓你對你的方式：

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

讓我知道，如果你有任何問題