jQuery 2D 拖放元素（非绝对位置）

Posted 2023-05-08

【中文标题】jQuery 2D 拖放元素（非绝对位置）

【英文标题】：jQuery 2D drag and drop element (Not absolute position)

【发布时间】：2020-07-18 15:34:48

【问题描述】：

我将使用拖放将外部元素放入内部 html。 所以我假设是这样的。这是内部 html。

<div class="inner_html">
   <div class="title">
     <h1>This is title</h1>
   </div>
   <div class="body">
     <li>this is element</li>
     <a>element</a>
   </div>
</div>

这里是外部 html。 <div>This is external element</div>

我将拖动外部元素并放入内部 html。 所以final element可以得到很多结果。 我认为如果位置是绝对的，那么可以使用 jquery 可拖动插件轻松完成。 但我不想要绝对位置。只想放入内部html。

谁能帮帮我？

【问题讨论】：

如果我理解正确，您首先需要代码来检测初始鼠标点击和对象点击。然后，检测释放点和释放发生的对象。最后，将第一个元素克隆到最后一个元素中并删除剩余的元素。还要检查这个：***.com/questions/22799779/…

谢谢，我会查的。

请查看：jqueryui.com/droppable 这是一个带有 jQ​​uery UI 库的基本拖放示例。

另外，<li> 不应该是 <div> 的子级。

snipboard.io/Bx0W7A.jpg 好吧，我打算删除这张图片，但它没有用。只是作为可拖动的，作为相对位置工作。

【参考方案1】：

考虑下面的代码。

$(function() 
  $(".drag > div").draggable();
  $(".inner_html").droppable(
    drop: function(e, ui) 
      ui.draggable.css(
        top: "",
        left: "",
        position: "inherit"
      ).appendTo($(".inner_html"));
    
  );
);

.inner_html 
  width: 340px;
  background: #ccc;
  padding: 1em;
  margin-bottom: 20px;


.inner_html>div 
  background: white;
  border: 1px solid #222;
  border-radius: 3px;


.drag 
  border: 1px solid #ccc;
  width: 340px;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="inner_html">
  <div class="title">
    <h1>This is title</h1>
  </div>
  <div class="body">
    <a>Link</a>
  </div>
</div>
<div class="drag items">
  <h3>Items</h3>
  <div>This is external element</div>
</div>

这是一个非常简单的例子。根据您的评论，您似乎有一个更复杂的情况。您应该提供a Minimal, Reproducible Example。