TableDnD在td jquery中不使用span
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了TableDnD在td jquery中不使用span相关的知识,希望对你有一定的参考价值。
我正在创建一个表格,其中我有可拖动的tr,我使用TableDnD作为可拖动组件。
代码如下所示:
$(document).ready(function () {
var iCnt = 1;
$("#tblQuestionAns tr").each(function () {
var id = "tr" + parseInt(iCnt);
$(this).attr("id", id);
iCnt++;
});
$("#tblQuestionAns").find("tr :even").addClass("even");
$("#tblQuestionAns").find("tr :odd").addClass("odd");
$("#tblQuestionAns").tableDnD({
onDragClass: "myDragClass",
onDrop: function (table, row) {
$("#tblQuestionAns").find("tr").removeClass("even odd");
$("#tblQuestionAns").find("tr :even").addClass("even");
$("#tblQuestionAns").find("tr :odd").addClass("odd");
}
});
});
当我创建如下所示的表时,这是有效的:
<table id="tblQuestionAns">
<tr>
<td>
Test1
</td>
</tr>
<tr>
<td>
Test2
</td>
</tr>
</table>
但是当我在td中添加span时,它将无法工作,这是一个例子:
<table id="tblQuestionAns">
<tr>
<td>
<span>Test1</span>
</td>
</tr>
<tr>
<td>
<span>Test2</span>
</td>
</tr>
</table>
答案
您是否尝试在span上禁用指针事件?它对我来说很好。不确定这是否是你想要完成的。
$(document).ready(function() {
var iCnt = 1;
$(".tblQuestionAns tr").each(function() {
var id = "tr" + parseInt(iCnt);
$(this).attr("id", id);
iCnt++;
});
$(".tblQuestionAns").find("tr :even").addClass("even");
$(".tblQuestionAns").find("tr :odd").addClass("odd");
$(".tblQuestionAns").tableDnD({
onDragClass: "myDragClass",
onDrop: function(table, row) {
$(".tblQuestionAns").find("tr").removeClass("even odd");
$(".tblQuestionAns").find("tr :even").addClass("even");
$(".tblQuestionAns").find("tr :odd").addClass("odd");
}
});
});
span {
pointer-events: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/isocra/TableDnD/master/js/jquery.tablednd.js"></script>
<div>
without span
</div>
<table class="tblQuestionAns">
<tr>
<td>
test1
</td>
</tr>
<tr>
<td>
test2
</td>
</tr>
</table>
<div>
with span
</div>
<table class="tblQuestionAns">
<tr>
<td>
<span>test1</span>
</td>
</tr>
<tr>
<td>
<span>test2</span>
</td>
</tr>
</table>
以上是关于TableDnD在td jquery中不使用span的主要内容,如果未能解决你的问题,请参考以下文章