Jquery связанные списки через вкладки - взаимодействие с базой данных - PullRequest
Новая
       55

Jquery связанные списки через вкладки - взаимодействие с базой данных

0 голосов
/ 06 марта 2011

У меня есть два связанных списка, каждый на вкладке Jquery UI.Я бы хотел, чтобы списки соединялись через вкладку, чтобы при перетаскивании элемента li из одного списка ul на имя вкладки добавлялся элемент li к целевому списку ul .

Я смог сделать это до некоторой степени с JQuery с списками подключения через вкладки Jquery, учебник , однако у меня нет 'Я не смог создать нужную мне функцию обратного вызова для события drop .

Для обратного вызова необходимо: (a) идентифицировать перетаскиваемый элемент, (b) список целей на основена какой вкладке раскрытия он был сброшен, и (c) отправить оба скрипта PHP через GET / POST, который будет выполнять взаимодействие с базой данных (перемещение элемента из одной таблицы базы данных в другую).

Вот JQueryЯ использую до сих пор (первая часть обрабатывает внутреннюю сортировку для sortable1 и sortable2 ): 

$(function() {
    $("#sortable1").sortable({
        items: 'li:not(.ui-state-disabled)',
        opacity: 0.6, 
        cursor: 'move', 
        connectWith: '.connectedSortable', 
        update: function() { 
            var order1 = $(this).sortable("serialize"); 
            $.get("updatedb.php?p=masterlist", order1, function(data){ 
            }); 
         },
      });

$("#sortable2").sortable({
    items: 'li:not(.ui-state-disabled)',
    opacity: 0.6, 
    cursor: 'move', 
    connectWith: '.connectedSortable', 
    update: function() { 
        var order2 = $(this).sortable("serialize"); 
        $.get("updatedb.php?p=offline", order2, function(data){ 
        }); 
     },
  });

var $tabs = $( "#tabs" ).tabs();

$("#tabs").droppable({
    accept: ".connectedSortable li",
    drop: function(ev, ui) {

    }             
});

(обратный вызов отбрасывания даже пустмои попытки до сих пор сработали.)

Вот вывод html для списков: 

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
    </ul>
    <div id="tabs-1">
        <ul id="sortable1" class="connectedSortable ui-helper-reset">
            <li class="ui-state-default">Item 1</li>
            <li class="ui-state-default">Item 2</li>
            <li class="ui-state-default">Item 3</li>
            <li class="ui-state-default">Item 4</li>
            <li class="ui-state-default">Item 5</li>
        </ul>
    </div>
    <div id="tabs-2">
        <ul id="sortable2" class="connectedSortable ui-helper-reset">
            <li class="ui-state-highlight">Item 1</li>
            <li class="ui-state-highlight">Item 2</li>
            <li class="ui-state-highlight">Item 3</li>
            <li class="ui-state-highlight">Item 4</li>
            <li class="ui-state-highlight">Item 5</li>
        </ul>
    </div>
</div>

Любая помощь с этой проблемой будет принята с благодарностью.Спасибо.

РЕДАКТИРОВАТЬ:

Решено, как это: 

    var $tab_items = $( "ul:first li", $tabs ).droppable({
        accept: ".connectedSortable li",
        hoverClass: "ui-state-hover",
        drop: function( event, ui ) {

            var $id = ui.draggable.attr('id');

            var $item = $( this );

            var $list = $( $item.find( "a" ).attr( "href" ) )
                .find( ".connectedSortable" );

            ui.draggable.hide( "fast", function() {
                $tabs.tabs( "select", $tab_items.index( $item ) );
                $( this ).appendTo( $list ).show( "fast" );
            });


            var $listname = $list.attr('id');

                $.get("tester.php", {list:$listname, id:$id}, function(data){ 

        }); 



        }
    });
});

1 Ответ

0 голосов
/ 05 августа 2011

Отличное решение.У меня тоже были проблемы с поиском значения перетаскиваемого элемента.В дополнение к этой проблеме мне нужно было, чтобы сортируемая функция принимала динамически создаваемое неизвестное количество списков.Это может быть полезно для людей, посещающих эту проблему. 

var num_lists = $('[id^=tabs-]').length;
for(i=1;i<=num_lists;i++){
  $("#sortable"+i).sortable().disableSelection();
}
...