Question

我有一个jquery ui可排序列表。我设置了一个“垃圾桶”来摆脱我不想要的物品。一旦我在列表项上设置了'draggable'，它们就不再排序了。

垃圾桶

$("#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>可拖动，让我的垃圾可以放置？”

我只是让我的垃圾箱可以排序并在我的列表div和trash div上使用connectwith并设置一个接收事件处理程序，这应该有效吗？我们看看......

$("#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

我的原始列表排序很好，我可以将列表项拖到垃圾桶“列表”，只需从原始列表，垃圾清单和我的数据库中删除它（）就可以了。

也许不是太优雅但是嘿，它有效。

Jquery UI可排序 - 可拖动 - 丢失可排序

0 个答案: