All geek questions in one place

How to sort th in thead string using jQuery UI sortable?

I am trying to make a very simple mesh plugin myself. My problem starts when I want to allow the user to change the order of the columns (do not sort the rows of the table, change, for example, the first column displayed to the right of the table). I am using jQuery UI sortable, but I found out that when a user starts dragging th, jquery ui adds a new th to thead. This makes the last th (the one that is larger to the right of the table) exit the table horizontally !!

When I remove th, I drag, the added th is deleted, but in Chrome the last one (the one that moves to the right, from the table) does not return to the table. In IE and FF, it returns to the table, but the drag and drop effect is very exciting.

My code is:

table.find("thead>tr").sortable({
    axis: "x",
    placeholder: "ui-state-highlight",
    handle: ".sortable",
    start: function(event, ui) {
        /* I'm doing some stuff */
    },
    update: function(event, ui) {
        /* I'm doing some stuff */
    }
});

, .

Update:

, , , . !

+3
3

№1: Chrome (, -) , : - http://bugs.jqueryui.com/ticket/4765

№2: : 'x', jQuery 1.8.12, , : 'x' . : - http://bugs.jqueryui.com/ticket/6702

+1

(), :

$var.sortable({
    placeholder: '.my-placeholder'
});

css:
.my-placeholder {
    display: none;
}

. , -, " ".

+1

Source: https://habr.com/ru/post/1762843/

More articles:


All Articles