我在拖放功能方面遇到问题，希望有人能提供帮助。简而言之，规则是:

1. 可以有多个的“阶段”(.stage)可以接受克隆的.pageControl。这是它唯一可以接受的类。

2. 一旦放在 .stage 上，.pageControl 就变成 .pageControlDropped 并且可以接受克隆的 .wfcControl。这是它唯一可以接受的类。

3. 一旦 .wfcControl 被删除，它就会被新的 html 替换并变成 .wfcControlDropped。

我的问题是:

1. 当我将克隆的 .pageControl 拖到 .stage 时，它​​会跳转到 .stage 上的某个位置，这不是我要放下它的位置。我可以将它拖回我想要的位置，但它需要放在我放下它的地方。我尝试了 CSS 定位，但它似乎适用于 .pageControl。一旦 .pageControl -> .pageControlDropped，它就会跳转到另一个位置。此外，它不像示例中那样非常流畅

2. 如果我将多个 .pageControl 拖到 .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>

感谢您对此的任何帮助。

最佳答案

这应该让你顺利上路:

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

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

关于javascript - JQuery 拖放定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4965595/