javascript - 如何从列表拖放到特定的表格单元格
问题描述
如何从选项列表中拖放它 我可以将列表中的特定选项拖放到表格单元格中,在这种情况下,拖放到客户地址的任何单元格中,(可以是表格或表格)和使用我从列表中拖动的选项更改单元格值。
我一直在尝试使用 sortableJS 来做到这一点,但我只能将选项作为一行而不是在特定的单元格中。
我想做的例子:
这是代码:
CSS:
<style>
.div-table {
display: table;
width: auto;
background-color: #eee;
border: 1px solid #666666;
border-spacing: 5px; /* cellspacing:poor IE support for this */
}
.div-table-row {
display: table-row;
width: auto;
clear: both;
}
.div-table-col {
float: left; /* fix for buggy browsers */
display: table-column;
width: 200px;
background-color: #ccc;
}
</style>
HTML:
<form id="form1">
<div class="div-table" id="table-left">
<div class="div-table-row">
<div class="div-table-col" align="center">Customer ID</div>
<div class="div-table-col">Customer Address</div>
</div>
<div class="div-table-row">
<div class="div-table-col">001</div>
<div class="div-table-col">003</div>
</div>
<div class="div-table-row">
<div class="div-table-col">ttt</div>
<div class="div-table-col">Mkkk</div>
</div>
</div>
</form>
<div class="table-list" id="list">
<p style="background: red; width: 200px">List</p>
<div>Option 1</div>
<div>Option 2</div>
</div>
JS:
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>
<script>
const tablea = document.getElementById("table-left");
const list = document.getElementById("list");
new Sortable(tablea, {
group: "shared", // set both lists to same group
animation: 150,
});
new Sortable(list, {
group: "shared",
animation: 150,
});
</script>
解决方案
推荐阅读
- css - pdf由带有pandoc的markdown制成,在一段时间后消除了双倍空格
- c# - 是否可以在 Timer 被处理后生成触发 System.Timers.Timer 的 Elapsed 事件的示例?
- c++ - 如何创建 += 运算符
- html - 将文本与响应式图像的特定基线对齐
- c++ - 如何在数组中投射随机数?
- ios - 如何在 UITableView 中跳过行
- python - 从字母中区分数字并在 Python 中创建新列
- visual-studio-code - 我可以使用 VS Code 批量编辑多个文件吗?
- sql - SQL:在索引中包含一个新列
- python - 使用 pandas 中的 ffill 在以下 NaN 之间分配值