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

让我知道，如果你有任何问题