可放置的元素在放置的页面中拖动

Question

我使用了 jquery 布局，并且在该布局中我使用了拖放。但我不明白为什么可放置元素没有在放置区域中拖动。我用它来拖动但无法成功

jQuery(function() {
  jQuery(".component").draggable({
      //use a helper-clone that is append to 'body' so is not 'contained' 
      //by a pane
    helper:  function () { 
                            return jQuery(this).clone().appendTo('body')
                               .css({'zIndex':5,}).show(); 
    },
    cursor: 'move'
  });

  jQuery('.ui-layout-center').droppable({ 
     accept:  '.component',
     drop:  function (event, ui) {
                      jQuery(this).append(jQuery(ui.draggable).clone()); 
     }
  }); 
});

我的html页面是这样的..

<div class="ui-layout-south">
  <button onclick="myLayout.toggle('north')">Toggle North Pane</button>
</div>

<div class="ui-layout-east"><span>Components</span>
  <div class="component" style="width: 30px; border: 2px solid #CCC; 
                   background: #009; padding: 10px;"></div>
  <p><button onclick="myLayout.close('east')">Close Me</button></p>
</div>

<div class="ui-layout-center">
</div>

Answer 1

这就是你要找的吗？

http://jsfiddle.net/WpRTc/2/ 。

我不确定您使用的是哪个 jquery 版本。所以我在这里使用了live方法。如果您使用的是最新版本的 jquery，请尝试“on”而不是 live。