Draggable () не работает в jquery - PullRequest
Новая
       11

Draggable () не работает в jquery

2 голосов
/ 26 мая 2011

Я отправляю этот вопрос во второй раз.и я до сих пор не получил никакого ответа.Прошло четыре дня, и я застрял в этой проблеме.draggable () не работает в динамически создаваемых таблицах. Я сравнил DOM таблицы, созданной вручную, и динамической таблицы, все одинаково, но он работает в таблице, созданной вручную, а не в динамической таблице.Это означает, что вручную я могу перемещать столбцы таблицы, как переупорядочивание, а не в динамическом режиме.Пожалуйста, мне нужна помощь в этом.ниже мой код. 

function addTab() {
        var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
        //alert(tab_title);
        $tabs.tabs('add', '#tabs-'+tab_counter, tab_title);                 

        var newTableDiv = $("<div />",{id: 'dialog'+tab_counter});          
        newTableDiv.appendTo("body");           
        alert("div appended to body"+" "+'dialog'+tab_counter);
        var setCSS = {
            'width' : '100%',
            'cellspacing' : '1px',
            'cellpadding' : '2px'
        }

        var newTable = $('<table class="ui-widget" width="100%" border="0"  cellspacing="1" cellpadding="2">'+
                    '<thead id="myTableHead'+tab_counter+'" class="ui-widget-header" style="display: table-header-group;">'+
                    '<tr><th><strong>Symbol</strong></th>'+
                    '<th><strong>Price</strong></th>'+
                    '<th><strong>Volume</strong></th>'+
                    '<th><strong>Buy</strong></th>'+
                    '<th><strong>Sell</strong></th></tr></thead>'+
                    '<tbody id="sortable'+tab_counter+'" class="ui-widget-content" style="display: table-row-group;">'+ 
'<tr><td>PSO</td><td>100.00</td><td>12</td><td>120.00</td><td>130.00</td></tr>'+
'<tr><td>ASO</td><td>200.00</td><td>11</td><td>120.00</td><td>130.00</td></tr></tbody></table>').attr('id', 'myTable'+tab_counter);
        $(newTableDiv).append(newTable);

        $('#myTable'+tab_counter).tablesorter(); 
        $('#myTable'+tab_counter).draggable(); //**not working**

        $( '#sortable'+tab_counter).sortable();         

        if ( $("#myTable"+tab_counter).length > 0 ) {
            alert("id exists");
        }
        alert("#myTable"+tab_counter);


        var myDiv = $("<div />", { "class":"ui-tabs-panel ui-widget-content ui-corner-bottom",id: 'tabs-'+tab_counter});
        myDiv.append("#tabs");

        $("#sortable"+tab_counter).show();
        $("#myTableHead"+tab_counter).show();

        $('#dialog'+tab_counter).prependTo('#tabs-'+tab_counter);           
        tab_counter++;
        //alert(tab_counter);
    }

Мне нужна помощь в этом.

1 Ответ

2 голосов
/ 26 мая 2011

Вы используете .draggable, который является методом пользовательского интерфейса jQuery, но он не будет работать для перемещения по столбцам, просто прикрепив его к заголовку таблицы. Вам нужно будет использовать вспомогательную функцию:

Для dragtable , хотя в документации сказано:

Добавьте class = "draggable" к любой таблице, которую вы хотели бы изменить.

Это немного упрощенно, потому что разработчик должен понимать, что вещи могут быть созданы динамически в Javascript!

Другими словами, простое добавление класса draggable в динамически созданную таблицу НЕ будет работать. Это связано с тем, что draggable уже добавил прослушиватели событий после выполнения init для всех таблиц, когда DOM готов. Изменение класса не приведет к автоматическому добавлению прослушивателя событий. Если бы это был плагин jQuery, он мог бы использовать .live для присоединения слушателей событий к любой динамически создаваемой таблице сейчас и в будущем, но, к сожалению, это не так.

Вам нужно будет прикрепить перетаскиваемый файл к вновь созданной таблице, попробуйте: 

dragtable.makeDraggable(newTable);

Изменить:

Убедитесь, что вы действуете на самом элементе таблицы, а не на объекте jQuery, т. Е .:

dragtable.makeDraggable(newTable[0]);

Скрипка: http://jsfiddle.net/garreh/64pyb/

...