添加新行后拖放不起作用 [英] Drag and drop not working after adding new row

问题描述

我正在使用 jquery.tablednd.0.7.min.js 来拖放表行。当我在表中动态添加新行（即使用javascript添加行）时，新行没有拖动n drop。表中已经存在的其他行可以被拖动。

我认为这个新行没有与jQuery拖放n代码同步。

我正在添加新的行，如此。 p>

这是jquery dragnDrop文件代码。

页面加载我正在使用此代码将此功能分配给表

  $（document）.ready（function（）{
 $（＃tableId ）.tableDnD（{
 onDragClass：myDragClass，
 onDrop：function（table，row）{
 
}，
 onDragStart：function（table，row ）{
 console.log（drag start）; 
} 
}）; 
}）; 
  

解决方案

您没有显示附加的代码的行，这是您需要重新绑定 tableDnD 相关事件的地方，但它看起来像这样：

$（$）$（$）$（$）$（$）$（$）$（$）$一行
$（。add-row）。click（function（）{
$（< tr />\").appendTo(\"#tableId）;
addTableDnD（）; //重新附加事件来接收新行
}）;
}）;

函数addTableDnD（）{
$（＃tableId）。tableDnD（{
onDragClass：myDragClass，
onDrop：function（table，row） {

}，
onDragStart：function（table，row）{
console.log（drag start）;
}
}）;
}

I'm using jquery.tablednd.0.7.min.js to drag and drop table rows. When I add new row in table dynamically (i.e. with javascript add row) that new row did not drag n drop. Other rows that are already present in table can be dragged.

I think this new row is not being synched with jQuery drag n drop code.

I am adding new row like this.

This is jquery dragnDrop file code.

On page load I am using this code to assign this functionality to table

$(document).ready(function() {
    $("#tableId").tableDnD({
        onDragClass : "myDragClass",
        onDrop : function(table, row) {

        },
        onDragStart : function(table, row) {
            console.log("drag start");
        }
    });
});

解决方案

You haven't shown the code which does the appending of the rows, which is where you would need to rebind the tableDnD related events, but it would look something like this:

$(document).ready(function() {
    //on load
    addTableDnD();

    //appending a row
    $(".add-row").click(function() {
        $("<tr />").appendTo("#tableId");
        addTableDnD(); // re-attach events to pick up the new row.
    });
});

function addTableDnD() {
    $("#tableId").tableDnD({
        onDragClass : "myDragClass",
        onDrop : function(table, row) {

        },
        onDragStart : function(table, row) {
            console.log("drag start");
        }
    });
}

这篇关于添加新行后拖放不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！