拒绝拖放到tabel的第一个子单元格
16lz
2021-01-22
I want to deny the user to drop the blue fields into the first column.
我想拒绝用户将蓝色字段放入第一列。
I found a sample and redesigned it a bit to make clear what I want to do...
我找到了一个样本并重新设计了一下,以明确我想做什么......
$(document).ready(function() {
$('.event').on("dragstart", function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table td').on("dragenter dragover drop", function(event) {
event.preventDefault();
if (event.type === 'drop') {
var data = event.originalEvent.dataTransfer.getData('Text', $(this).attr('id'));
de = $('#' + data).detach();
de.appendTo($(this));
};
});
})
table th,
table td {
height: 30px;
width: 200px;
}
table span {
display: block;
background-color: #09C;
height: 30px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="#our_table" border="1" cellspacing=0>
<tr>
<th>Deny Drop on this column</th>
<th>Used</th>
<th>Available</th>
</tr>
<tr>
<td>Firstname</td>
<td></td>
<td rowspan=5>
<span class="event" id="a" draggable="true">Firstname</span>
<span class="event" id="b" draggable="true">Lastname</span>
<span class="event" id="c" draggable="true">Street</span>
<span class="event" id="d" draggable="true">Age</span>
<span class="event" id="e" draggable="true">Country</span>
<span class="event" id="f" draggable="true">Nickname</span>
<span class="event" id="g" draggable="true">Phone</span>
</td>
</tr>
<tr>
<td>Lastname</td>
<td></td>
</tr>
<tr>
<td>Street</td>
<td></td>
</tr>
<tr>
<td>Zipcode</td>
<td></td>
</tr>
<tr>
<td>City</td>
<td></td>
</tr>
</table>
更多相关文章
- 可编辑的表格:jQuery+PHP实现实时编辑表格字段内容
- 为什么我不能在同一个js文件中建立两个cleave.js格式的字段?
- 在使用javascript将信息输入到输入字段时填充文本区域
- 更改html隐藏字段的事件
- Symfony 2在用户站点上动态添加字段以形成
- 如何在MVC4中使用type= " url "而不用jQuery将字段验证为url ?
- 使用表单字段值定制CSS属性。
- 我无法在某些Web浏览器中输入我的注册文本字段
- 将文本从表单复制到另一个网站的文本字段