拒绝拖放到表格的第一个子单元格
Deny drag and drop to first-child cells of tabel
我想拒绝用户将蓝色字段放入第一列。
我找到了一个样本并重新设计了一下,以明确我想做什么......
$(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>
可能我使用的代码不是最好的,所以我愿意接受一些更好的解决方案:)
我想知道是否可以拒绝将拖放功能拖放到表的第一个单元格?
使此选择器$('table tr td:not(:first-child)')
$(document).ready(function() {
$('.event').on("dragstart", function(event) {
var dt = event.originalEvent.dataTransfer;
dt.setData('Text', $(this).attr('id'));
});
$('table tr td:not(:first-child)').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></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>
你可以检查td是否是()第一个孩子:
$(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' && !$(this).is( "td:first-child" )) {
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></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>
相关文章:
- 使用Office.js在Excel中将20000多个单元格写入表失败
- 将电子邮件正文导出到Google Sheets中的多个单元格中
- 如果选择了..单选按钮,则如何从多行中发送特定行的多个单元格数据
- 如何循环遍历表行,更改类,并使用"n〃;行数,并知道每行中第一个单元格的值
- 谷歌电子表格在多个单元格中显示脚本中的值
- 获取HTML表中单击的列中第一个单元格和单击的行中第一个单元的内容
- 如果找到第3行,则删除next和next tr的第3个单元格
- 使用 javascript 创建表,同时保留第一个单元格行
- 如何循环访问其第三个单元格具有 rowspan 属性的每一行
- 找到行跨度,然后检查第一个单元格是否有文本
- Google表格脚本,用于将一张工作表上的几个单元格值传递给新的工作表行
- jQuery选择当前TR的第二个和第三个单元格
- 拒绝拖放到表格的第一个子单元格
- 以复选框为列的剑道网格将焦点更改为第一个单元格
- 访问HTMLTableRowElement第一个单元格中的值
- javascript知道你什么时候'重新单击表格行的第一个单元格
- 获取所单击表行的第一个单元格的数据
- 从另一个单元格中动态创建的元素中获取第一个单元格的内容
- 如何从html表中选择行,获得第一个单元格的值,并将其放在PHP会话中
- 如何使用Javascript在不获取第一个单元格值的情况下获取所有数据