Question

我遇到拖放功能问题，我希望有人可以提供帮助。简而言之，规则是：

“stage”（.stage）中可以有多个可以接受克隆的.pageControl。它是唯一可以接受的课程。
一旦放在.stage上，.pageControl就会变成.pageControlDropped并且可以接受克隆的.wfcControl。它是唯一可以接受的课程。
一旦.wfcControl被删除，它将替换为新的html并变为.wfcControlDropped。

我的问题是：

当我将克隆的.pageControl拖到.stage时，它会跳转到.stage上的一个位置，这个位置不是我正在放弃它的位置。我可以把它拖回到我想要的地方，但它需要放下我丢弃的地方。我尝试了CSS定位，但它似乎适用于.pageControl。一旦.pageControl - ＆gt; .pageControlDropped，它跳转到另一个位置。此外，它不像示例
如果我将多个.pageControls拖到.stage，其中任何一个都应该接受.wfcControl。但似乎只有第一个.pageControl（现在.pageControlDropped）接收它。我无法获得第二个.pageControlDropped来接收它。
如何让连续的.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")      
      );    
    }

        })
      );    
    }
  }
);

样本： http://jsbin.com/orepew

如果您有任何问题，请告诉我

JQuery拖放定位问题

1 个答案: