jquery - jQuery 2D 拖放元素(非绝对位置)
问题描述
我将使用拖放将外部元素放入内部 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。
谁能帮我?
解决方案
考虑以下代码。
$(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>
这是一个非常简单的例子。根据您的评论,您似乎有一个更复杂的情况。您应该提供一个最小的、可重现的示例。
推荐阅读
- continuous-integration - 配置 Github Workflow Action 以将操作结果发送到松弛消息
- typescript - 如何在 postgresql 上存储带有 typeorm 的 json 对象数组?
- javascript - 通过在字符串中查找邮政编码来分隔字符串
- ios - App Tracking Authorization的预许可提示如何处理?
- xml - NIFI XML 转换
- php - 如何在 php 中使用客户端 RSA 私钥解密 AES 密钥(请求 Json 中的“session_key”)
- python - 为什么在开发集上优化 CRF 超参数后 NER 的 F1 分数较低?
- google-apps-script - 只有在 Google Apps Script/Google Sheet 中的某个列设置了某个值时,如何自动连续排序?
- blazor - 自定义 Blazor Wasm 应用程序的“授权...”消息(左上角)
- c# - 我无法将 ComboBox 停靠在 TableLayoutPanel 单元格中