替换 DOM 元素的位置并保留其事件

Question

我正在编写一个 jquery 插件，它获取一个表并允许更改列顺序。
将位于 oldIndex 位置的列放入 newIndex 位置的代码是：

table.find('> thead > tr, > tbody > tr').each(function() {
    var row = $(this);
    var children = row.children();
    var source = $(children[oldIndex ]);
    var destination = $(children[newIndex ]);

    if (oldIndex != newIndex ) {
        destination
            .replaceWith(source)
            .appendTo(row);
    }
});

问题是每个 td 都有来自此代码之外的事件。当使用 replaceWith 时，它会删除这些事件。

有什么想法可以替换 DOM 元素的位置并保留其事件吗？

Answer 1

确保绑定函数附加到要移动的元素。

我建议使用逻辑来交换列，而不是使用 replaceWith 。 .eq 用于选择特定列的索引，< a href="http://api.jquery.com/after/" rel="nofollow noreferrer">.after() 和 .before() 用于交换列：

演示： http://jsfiddle.net/SfwXg/

// Indexes are zero-based
var oldIndex = 1;  // = Second column
var newIndex = 2;  // = Third column
var table = $('table');

if (oldIndex != newIndex) {
    if (oldIndex > newIndex) {
        // Let newIndex always be higher than oldIndex
        var tmp = oldIndex;
        oldIndex = newIndex;
        newIndex = oldIndex;
    }
    table.find('> thead > tr, > tbody > tr').each(function() {
//or:table.children('thead,tbody').children().each(function() {
        var row = $(this);
        var children = row.children();
        
        var right = children.eq(newIndex);
        var left = children.eq(oldIndex);
        
        children.eq(newIndex).after(left);
        if (newIndex != oldIndex+1) {
           // If they're next to each other, don't swap the columns
           children.eq(oldIndex+1).before(right);
        }
    });
}

Answer 2

怎么样：

if (oldIndex != newIndex ) {
    var tmp = $('<td>').insertBefore(destination); // create tmp td before destination
    source.after(destination); // move destination after source
    tmp.after(source).remove(); // move source after tmp, remove tmp
}

编辑：上面的代码交换了 2 个 td，这与所要求的不同（移动一个 td）。

无论事件有什么问题，如果您想将 source 移动到 destination 之前，只需执行 source.insertBefore(destination) 或 目的地.之前（源）。在您的代码中，您将 destination 移动到 tr 的末尾。