使用ajax拖放功能重新排序列字段？ PHP/jQuery

目前我正在构建一个站点，其中一个功能是创建列表的能力，然后您可以添加指向特定列表的链接。一个列表将会有很多链接。使用ajax拖放功能重新排序列字段？ PHP/jQuery

我想通过简单的拖拽li元素融入到新的位置，然后通过Ajax调用链接weight更新数据库命令由weight链接列表。

视图文件

<ul id="links_list"> 
<?php 

if($links->num_rows() >= 1){ 

    $i = 0; 

    foreach($links->result_array() as $link){ 

     echo "<li class=\"list_item-".$i."\">"; 
     echo ''.$link['title'].'<br><br>'; 
     echo "</li>"; 

     $i++; 
    } 

}else{ 

    echo "You have not yet added any links to this list."; 

} 

?> 
</ul>

我知道这是不是太多去，但不知道该如何实现这个或者甚至开始。

任何帮助，非常感谢。

来源

2013-10-24 learn

jquery ui [可排序]（http://jqueryui.com/sortable/）。我通过将隐藏的输入元素放置在li中，并使用'sort []'并在底部添加一个“保存”按钮来完成此操作。他们按照排序的顺序通过表单。 –

@IvanButtinoni我以什么方式要求某人为我写代码？我只是问这个过程会是什么让这样的事情发生和运行。 – learn

@JonathanKuhn我看到你从哪里来。我假设我能够做到这一点没有保存按钮，但我想要自动更新订单？ – learn

我最终提出了我的解决方案，这是以下问题。

视图

<ul id="links_list" class="sortable"> 
<?php 

if($links->num_rows() >= 1){ 

    $i = 0; 

    foreach($links->result_array() as $link){ 

     echo "<li id=\"list_item-".$link['id']."\">"; 
     echo ''.$link['title'].'<br><br>'; 
     echo "</li>"; 

     $i++; 
    } 

}else{ 

    echo "You have not yet added any links to this list."; 

} 

?> 
</ul>

jQuery的

$("#links_list").sortable(
{ 
    connectWith: '.sortable',  
    update : function() 
    { 
     $.ajax(
     { 
      type: "POST", 
      url: base_url + "links/reorder", 
      data: 
      { 
       links: $("#links_list").sortable('serialize')    
      }, 
      success: function(html) 
      { 
       html; 
      } 
     }); 
    } 

}).disableSelection();

链接/重拨PHP脚本

public function reorder(){ 

    parse_str($this->input->post('links'), $links); 

    foreach($links['list_item'] as $key => $value){ 

     $this->db->set('weight', $key); 
     $this->db->where('id', $value); 
     $this->db->update('links'); 

    } 

}

希望这可以帮助别人。

来源

2013-10-24 19:02:15 learn

我建议使用jquery ui sortable。您可以附加到其中一个事件，如change，以获得更改列表，并发送一个ajax调用服务器保存

来源

2013-10-24 17:43:29

谢谢你真的帮助:) – learn

使用ajax拖放功能重新排序列字段？ PHP/jQuery

回答

相关问题