php - 使用 ajax jquery 和 php 将 sortable 保存到 mysql

Question

我有一个包含多个拖放框的页面，效果很好，但不起作用的是框中的链接。如果有人可以帮助我，我将不胜感激:)。所以我有一个页面，人们可以在其中拖放框(它工作正常，正如我之前所说)，框内的链接也可以排序，但我似乎无法让它们将值保存到 mysql。我认为这两个拖放之间存在冲突，也许我做错了，因为我以前没有使用过 ajax 和 jquery。

//here is the jquery where I need to add some ajax
$(function() {
$('.dragbox-content').sortable({ 
  connectWith: '.dragbox-content',
  update: function(event, ui) {
        var order=$(this).attr('id');
        alert(order);  // I get the order alert and it has one value that I need, but I need the sort order aswell                         
  }
  });                 
});

//this is the <div> that has the links in them and mysql query that gets the values
//from two different databases, one is for the boxes and the other for links.
//boxes db id = links title_id
echo '<div class="dragbox-content" id="order'.$widget['id'].'"';'>''</div>';

$sql10 = "SELECT u.*, w.id, w.link_address, w.link_name FROM db_boxes u LEFT 
JOIN db_links w ON u.link_id = w.id  WHERE 
(u.username = '$username' AND u.link_id !='0' AND w.title_id = '".$widget['id']."' 
AND w.link_name !='pilt' AND w.rights = '0') OR 
(u.username = '$username' AND u.link_id !='0' AND w.title_id = '".$widget['id']."' 
AND w.link_name !='pilt' AND w.rights LIKE '%26%') ORDER BY w.id ASC";
      $result10 = mysql_query($sql10) or die (mysql_error());
      while ($row = mysql_fetch_array($result10)) {
        $link_id = $row['id'];
        $link_address = $row['link_address'];
        $link_name = $row['link_name'];
        $title_id = $row['title_id'];
      ?>
      <div class="move" id="<?php echo $link_id;?>">
      <span class="link_style">
      <div><a href="<?php echo $link_address; ?>"><?php echo $link_name;?>     </a></div</span></div>

我只需要有人告诉我如何在用户每次点击该页面时使用 ajax 将 tile_id 和 sort_order 保存到 boxes 数据库

Answer 1

请参阅下面的示例:

http://jsfiddle.net/gRoberts/vMy7r/

$(function () {
    $('ul').sortable({
        update : function(e, ui) {
            var ul = $(ui.item).closest('ul');
            var index = 0;
            var toPost = {};
            ul.find('> li').each(function() {
                index++;
                $(this).find('input').val(index);               
                toPost[$(this).find('input').attr('name')] = index;
            });                  
            $.ajax({
                url : '/echo/json/',
                data : toPost,
                type : 'POST',
                dataType : 'json',
                success : function(resp) {
                    alert(resp);
                },
                error : function() {
                    alert('There was a problem');
                }
            });
        }
    });
});
​

上面的例子可以有两种使用方式，如果你删除 $.ajax 它将更新隐藏的表单字段，然后你可以正常发布。