JQuery UI Sortable - Draggable - потерять сортируемый - PullRequest
Новая
       34

JQuery UI Sortable - Draggable - потерять сортируемый

2 голосов
/ 17 декабря 2011

У меня есть сортируемый список jquery ui.Я создал «мусорное ведро», чтобы избавиться от предметов, которые мне не нужны в списке.После того, как я настроил «перетаскиваемый» в моих элементах списка, они больше не сортируются.

мусорная корзина 

$("#trash").droppable({
      drop: function(ev, li)
      {
        var $element = li.draggable;
        $element.remove();
    $.ajax({                                      
        url: 'deltask.php',                          
        data: 'id='+$element.attr('id'),            
        dataType: 'html',                   
        success: function(data)          
        {
        }
    });

      }
});

Делаем список сортируемым 

    // set our listdiv ul as sortable 
    $("#listdiv ul").sortable({ opacity: 0.6, cursor: 'move', update: function(){
        var order = $(this).sortable("serialize") + '&action=update'; 
        $.post("updatelist.php", order, function(){
        });                                                              
    }                                 
    }); // listdiv ul end

исделав все элементы списка в этом ul перетаскиваемыми, чтобы я мог перетаскивать их в мусорное ведро: 

    $("#listdiv li").draggable({
        opacity : 0.7,
        revert  : 'invalid',
                helper  : 'clone',
                zIndex  : 100,
                cursor  : 'move'
        });

Сортировка работает до тех пор, пока я не включаю секцию чуть выше, которая делает перетаскивание <li>.Добавим, что я буду перетаскивать их, но элементы списка больше не будут сортироваться.

Что мне плохо, пожалуйста?

Спасибо, Стив

ПРИМЕЧАНИЕ: я не знаю протокол ответа на свой вопрос, поэтому я просто редактирую свой оригинальный вопрос!Кто-то дает мне пощечину, если я ошибаюсь, пожалуйста, сделайте это.

Обход проблемы, указанной выше:

После сна я подумал: «Зачем делать моисортируемый список <li> можно перетаскивать, а мой мусор можно сделать пометкой? "

Я просто делаю мой мусорный бак сортируемым и использую connectwith в моих списках div и trash div и настраиваю обработчик событий полученияи что должно работать?Давайте посмотрим ... 

$("#trash").sortable({

      connectWith: '#listdiv',
      receive: function(event, ui)
      {
     var $element = ui.item;
//        alert ( $element.attr('id') ) ;

        // remove this from original list
        $element.remove();

    //remove this item from trash list
    $("#trash li").remove(),

        // remove from database
    $.ajax({                                      
            url: 'deltask.php',                          
            data: 'id='+$element.attr('id'),            
            dataType: 'html',                   
            success: function(data)          
            {
            //  alert(data);
            }
    });

      } // end receive
}); // end trash



// set our listdiv ul as sortable 
$("#listdiv ul").sortable({
    opacity: 0.6,
    cursor: 'move',
    connectWith: '#trash',
    update: function()
        {
            var order = $(this).sortable("serialize") + '&action=update'; 
            $.post("updatelist.php", order, function(){
            });      
        }   
}); // end  listdiv ul sortable

Мой оригинальный список нормально сортируется, и я могу перетащить элемент списка в «список» корзины и просто удалить () его, когда он прибудет из исходного списка, списка корзины,и из моей базы данных.

Возможно, не слишком элегантно, но эй, это работает.

...