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

Posted 2023-05-08

【中文标题】可放置的元素在放置的页面中拖动

【英文标题】：droppable elements drag in the dropped page

【发布时间】：2012-02-05 17:49:30

【问题描述】：

我使用了 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>

【问题讨论】：

您的代码正在运行。看到这个小提琴jsfiddle.net/WpRTc

不，它没有按要求工作。在可放置区域中它没有再次拖动。

【参考方案1】：

这就是你要找的吗？

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

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

【讨论】：

抱歉，我正在尝试另一件事。我的意思是这段代码正在工作，但我可以看到当你拖动一个元素时，被拖动的元素会自动像一个在另一个下面一样放置，这是不想要的。我希望该用户可以拖动元素并在页面中的任何位置调整该元素。

ohh...ok..那么你必须在你的 div 被丢弃后找到位置。请参阅此帖子以实现***.com/questions/849030/…

不，我必须根据用户要求将元素放置在页面中的任何位置。就像您在任何线框应用程序中所知道的那样。

好的...这可能会有所帮助。 placona.co.uk/166/javascript/…