jQuery二维拖放元素(不是绝对位置)
jQuery二维拖放元素(不是绝对位置)
提问于 2020-04-06 23:21:27
我将使用拖放将外部元素放入内部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中。所以最后一个元素可以得到很多结果。我认为如果位置是绝对的，那么可以使用jquery draggable plugin轻松完成。但我不想要绝对位置。我只想放入内部的html。
有谁可以帮我？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-04-07 04:29:29
考虑下面的代码。
$(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。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61063153
复制相关文章
相似问题
腾讯云开发者
