заменить положение элемента DOM и сохранить его события - PullRequest
Новая
       7

заменить положение элемента DOM и сохранить его события

3 голосов
/ 26 января 2012

Я пишу плагин 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);
    }
});

Проблемав том, что у каждого тд есть события которые вышли за пределы этого кода.При использовании replaceWith эти события удаляются.

Как я могу изменить положение элемента DOM и сохранить его события?

Ответы [ 2 ]

2 голосов
/ 26 января 2012

Убедитесь, что связанные функции присоединены к элементу для перемещения.

Вместо использования replaceWith я предлагаю использовать логику для замены столбцов..eq используется для выбора индекса конкретного столбца, .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);
        }
    });
}
1 голос
/ 26 января 2012

Как насчет: 

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.before(source). В вашем коде вы перемещаете destination в конец tr.

...