Question

所以我有2个html页面。 1用作容器，1用作内容。当我用表格加载内容页面时，我可以使用拖放。

但是当我转到我的容器页面并将内容页面加载到带有ajax的div时，拖放工作就停止了。内容页面中的所有其他JavaScript功能仍然有效。如何将jquery dnd插件绑定到加载了ajax的表？

我正在使用拖动和放大器将其作为教程http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

删除

我的代码如下：

$(window).load(function()
{   if(temp == 0)
    { 
        DP("eerste keer")
        load_table(); 
        temp = 1;
    }
} );

function load_table()
{    
    DP('load_table');
    $.ajax({
            //async: false,
            type: "POST",
            url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
            success: function (data) {
                    $("#diagnoses_zelf").html(''); //<== clears current content of div
                    $("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
                },
            error: function(){
                alert('error');
              } 
        }).done(function() {
        update_table(); 
        initialize_table();    // <== calls jquery plug in
        });

    return false;   
}


function initialize_table() 
{
    var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
    alert(tableid);
    $(tableid).tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        var tette = $(row).index;
        alert(tette);
        },
        dragHandle: ".dragHandle"
    });     
}

enter image description here

这怎么可能，我该怎么办呢？任何人都可以帮我这个。

很短：我想访问我用ajax加载到容器页面的表的ID，并使用jquery拖放插件。

修改

调查结果：

我的容器页面中的表格被重命名为 pSqlaTable 而不是我在控制器页面中给它的ID。

<table id="tableDiagnose" class="table table-hover">

这就是为什么代码无法找到表annymore由于FábioBatista而被此代码修复：

$('#diagnoses_zelf table').tableDnD( ... );

，但我现在如何使用dnd插件？

它现在找到了这个表，但是我仍然无法将dnd插件绑定到它，我能够将jquery插件绑定到ajax加载的表吗？

修改

//drag & drop http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/
function initialize_table() 
{
    var tableid = $('#diagnoses_zelf table').attr('id');
    alert(tableid);
    $('#' + tableid).tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        alert('issemer?');
        },
        dragHandle: ".dragHandle"
    });    
}

这是我仍然坚持的代码。 tableid是正确的，但jquery的初始化不是。我不能拖着桌子上的瞌睡。我的语法错了吗？

修改

难道我无法将jquery绑定到表中，因为我使用ZPT（或javascript）动态生成另一页上的表吗？

Answer 1

插件的问题。

您正在混合许多外部库和代码。这导致版本之间可能存在不匹配，并且代码中存在大量黑盒。

作为开发人员，这会让你感到非常不安。拥有您在代码库中无法完全理解的代码可能会让您感到非常沮丧。

替代方案。

通常，这些插件提供了我们的功能，因为JavaScript开发人员可以在没有它们的情况下轻松完成。在简单的场景中，这个开发过程让我们可以创建我们理解的代码并更容易维护。我们不仅从这个过程中学习，而且还创建了一小部分特定代码。社区驱动的解决方案总的来说非常好，但重要的是要记住它们不是灵丹妙药。通常你会被一个不那么活跃的项目所困扰，因为你的具体案例有一个bug，你必须深入挖掘一个庞大的，不熟悉的代码库。

您的代码

那么这个拖放插件会做什么？

好吧，我将其分解如下：

收听表格行上的the mousedown事件
当此类事件触发时，开始移动表格行以匹配鼠标位置
发生mouseup时，检测并确定位置。

让我们看看我们如何做类似的事情。我们假设表的HTML类似于：

<table>
    <tbody>
    <tr>
        <td> Hello 1</td>
    </tr><tr>
        <td> Hello 2</td>
    </tr>
    </tbody>
</table>

Here is a fiddle with the table with some basic styling applied

接下来，我们将听取选择事件。我们将向表行添加一个事件以供选择，并将文档添加到鼠标启动时的文档中。 jQuery具有此类事件的事件侦听器。由于我们希望这些事件在AJAX之后仍然存在，我们将使用.on来允许我们使用委托事件。 .on表示即使我们稍后向表格添加内容，也无关紧要。

var selected; // currently selected row
$(document).on("mousedown","#MySpecialTable tr",function(){
   $("#textDiv").text(this.textContent); 
    selected = this;
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.textContent); 
    selected = null;
});

Here is a working fiddle此类代码。

现在，我们想要实际更改拖放功能，即将当前位置更新为反映鼠标位置的位置。我们可以收听mousemove个事件，并检测我们当前所在的元素。像

这样的东西

$(document).on("mousemove",function(e){
    $("#textDiv").text($(e.target).html());
});

You can see a working fiddle here

这很好，但我们想要实际改变元素位置。所以我们需要更改表结构以允许它。我们可以删除元素，并将其附加到正确的位置。我们将检查是否有一个选定的元素，如果我们这样做，我们可以跟踪它与mousemove事件中的当前元素进行比较。我们可以为初学者检测是否应该使用以下内容进行拖动：

$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            $("#mousePos").text("DRAGGING");    
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

(Fiddle)

现在，我们将添加实际选择，当目标不是我们的元素时，我们将替换元素，并且我们在表中。我们的完整代码应该是：

var selected;
$(document).on("mousedown","#MySpecialTable tr",function(e){
    e.preventDefault();//stop the text selection;
   $("#textDiv").text(this.textContent); 
    selected = $(this);
    selected.find("td").css("background-color","#999");
});
$(document).on("mouseup",function(){
    $("#textDiv").text("Left "+selected.text()); 
    selected.find("td").css("background-color","");
    selected = null;
});
$(document).on("mousemove",function(e){
    if(selected !=null){// got an element selected
        if($("#MySpecialTable").has(e.target).length > 0){ //in the table
            var el = $(e.target).closest("tr");//the tr element we're on
            el.before(selected);// replace the elements
        }
    }else{
        $("#mousePos").text("NOT SELECTED");
    }
});

$("#MySpecialTable").on('selectstart', false);//Don't let the user select the table

（Fiddle）

现在，到目前为止，我们只有几行代码，这很好，因为我们确切地知道发生了什么，并且不需要使用我们不完全理解的许多外部代码行。

但它会是AJAX吗？

让我们用AJAX将数据加载到表中并查看！我们将使用setTimeout模拟AJAX响应，这将允许我们模拟异步请求。我们将使用

setTimeout(function(){
    $("#MySpecialTable").html("<tr><td> Hello 1</td></tr><tr><td> Hello 2</td></tr><tr><td> Hello 3</td></tr><tr><td> Hello 4</td></tr><tr><td> Hello 5</td></tr><tr><td> Hello 6</td></tr>");
},1000);

这意味着，在一秒钟后更新#MySpecialTable的HTML。让我们看看它是否有效？

So why does it work?好吧，我们使用了delegated events，这意味着我们不关心我们正在加载的元素是否现在在屏幕上。我们有这样做的洞察力，因为我们自己构建了代码并知道我们的最终目标是什么。剩下要做的就是清理一下代码。

我们将在下面包含我们的代码，以防止$在非冲突模式下成为问题（也就是说，页面中已经采用了$：

(function($){

})(jQuery);

接下来，我们将为表事件添加一个绑定：

$.GertVDragTable = function(elementSelector){ // rest of code.

最终，我们的代码可能会look something like this.

使用它，将是一个简单的$.GertVDragTable("#MySpecialTable");，我们可以将它放在$.fn上并允许每个函数调用它。这是一个品味问题。

请不要复制意大利面:)如果你在每个阶段停下来并且认为为什么采取了下一步，我会很感激。

Answer 2

您不需要将ID用作选择器，您可以使用任何可以找到您的表的表达式。

如果生成的$.ajax调用中只有一个表，您可以使用容器ID搜索“容器内的表”，该容器ID不会更改：

$('#diagnoses_zelf table').tableDnD( ... );

如果有多个表，请使用其他类型的选择器，而不是ID。 CSS类工作正常：

$('table.table-diagnose').tableDnD( ... );

data-属性也是如此：

$("table[data-diagnose]").tableDnD( ... );

Answer 3

尝试在表格中添加title，如下所示：

<table id = "tableDiagnose" class = "table table-hover" title = "table-content">

然后使用jQuery attribute selector查找此表，而不是id找到它。

$('table[title="table-content"]').tableDnD({ 
// the rest of your code

Answer 4

如果您的ID正在更改，则不应使用ID：

<table class="tableDiagnose table table-hover">

<强>插件

function initialize_table() 
{
    $('.tableDiagnose.table').tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);
        },
        dragHandle: ".dragHandle"
    });   
    DP('nee');  
}

编辑：ajax是异步的：

function load_table()
{    
    DP('load_table');
    $.ajax({
            //async: false,
            type: "POST",
            url: "/diagnose_hoofdpagina/table_diagnose/" + DosierID, // <== loads requested page
            success: function (data) {
                    $("#diagnoses_zelf").html(''); //<== clears current content of div
                    $("#diagnoses_zelf").append(data).trigger('create'); // <== appends requested page
                    update_table(); 
                    initialize_table();    // <== calls jquery plug in
                },
            error: function(){
                alert('error');
              } 
        });
        //removed .done as you already have a success option in ajax


    return false;   
}

编辑：找到你的bug ........ 您检索表ID然后在$（tableid）中选择它，但您错过了#

function initialize_table() 
{
    /*
    var tableid = $('#diagnoses_zelf table').attr('id'); //< this finds the correct table thanks to Fábio Batista => this option worked, rest didn't
    alert(tableid);
    // but you really should limit the use of variables when you don't need them*/
    //$('#'+tableid).tableDnD({            
    //like this directly
    $('#diagnoses_zelf table').tableDnD({    
        onDrop: function(table, row) {
        alert(table + "     "  +  row);

        },
        onDragStart: function(table,row){
        var tette = $(row).index;
        //alert(tette);
        },
        dragHandle: ".dragHandle"
    });     
}

See the demo here

修改

Answer 5

您是否在容器页面或内容页面中包含脚本文件？我猜你可能想在用getScript调用dnd插件时尝试加载它：

...
$.getScript('pathTotableDnDlib').done(function(){
    $(tableid).tableDnD({    
    onDrop: function(table, row) {
    alert(table + "     "  +  row);

    },
    onDragStart: function(table,row){
    var tette = $(row).index;
    alert(tette);
    },
    dragHandle: ".dragHandle"
});});
...

更多关于getscript：here

Answer 6

@BenjaminGruenbaum对于本教程来说很多，我修改了一些代码来阻止表头上的拖拽，并改善跟踪鼠标方向的拖动流动性。

var old_y = 0;
(function ($) {
    $.GertVDragTable = function (tableName) {
        var selected;
        $(document).on("mousedown", tableName+" tr",function (e) {
            e.preventDefault(); //stop the text selection;
            if (($(this).find('th').length)== 0){   //prevent dragging on tr containing th
            selected = $(this);
            selected.find("td").css("background-color", "black");
            selected.find("td").css("color", "white");
            }
        });

        $(document).on("mouseup", function () {
            selected.find("td").css("background-color", "");
            selected.find("td").css("color", "");
            selected = null;
        });
        $(document).on("mousemove", function (e) {
            if (selected != null ) { // got an element selected
                if ($(tableName).has(e.target).length > 0) { //in the table
                    var el = $(e.target).closest("tr"); //the tr element we're on
                    if (el.find('th').length==0){ //prevent dropping on headers row

                    if (e.pageY > old_y){       //**
                    el.after(selected);}else{   //**-->more fluid dragging based on mouse direction
                        el.before(selected);    //**
                    }

                }
                }
                old_y = e.pageY;
            }
        });

        $(tableName).on('selectstart', false); //Don't let the user select the table
    }
})(jQuery);

这里是小提琴http://jsfiddle.net/59rdq/

我希望它对某人有用。

用ajax加载后无法在DOM中找到元素（想要将jquery插件绑定到它）

6 个答案:

插件的问题。

替代方案。

您的代码