Jquery UI 可排序，将订单写入 MySql 数据库

Question

我目前正在使用 JQuery UI Dragabble、Droppable 和 sortable。我的 php 文件的顶部和底部有两个 div 部分，我正在从底部到顶部 div 部分拖放内容。

在顶部 div 部分，我正在执行可排序的 JQUery 操作，我的下一个要求是当我在顶部执行排序操作时，它的顺序应该在我的 MYSQL 数据库中自动更新，我必须像如何将排序顺序传递给我的 MySQL 数据库一样卡住通过 ajax 和 php 文件。有人可以提出一些帮助来实现它！

谢谢！

HTML/PHP 代码

<div class="drop_list">
        <ol id="sortable" style="list-style:decimal;"></ol>
    </div>
    <div class="sort_list">
    <ul id="draggable">
        <?php 
            for($i=1;$i<=5;$i++)
            {
            ?>  
                <li data-id='article_<?php echo $i;?>' class="draggable_li qitem" >
                    <div class="main_div">
                        <div class="secondary_div">
                            <div class="form_div">
                                <form>
                                    <input style="width:15px;" type="checkbox" class="hello"/>
                                </form>
                            </div>
                            <label class="item_div">
                                <span class="item">Item = <?php echo $i; ?></span>
                            </label>
                        </div>
                        <button class="hello btn btn-success add_top">
                            Add to Top Stories
                        </button>
                        <span class="AH_section" style="display:none;float:right;">
                            <input type="checkbox"/>Home Section
                            <input type="checkbox"/>App Home Section
                        </span>
                    </div>
                </li>
            <?php
            }
        ?>
    </ul>
    </div>
    </div>
        </div>
    </div>

JQuery 代码

$(document).ready(function() {

        $("#sortable").sortable({
            revert: true,
            refreshPositions: true ,
            helper : 'clone',
            cursor: "move",
            delay: 1,
            tolerance: 'pointer',
            revert: 50  
            /*stop:function(event,ui){
                var data = $(this).sortable('serialize');
            }*/ 
        }).serialize();

        $("ol li").disableSelection();

        $(".sort_list li").draggable({
            //containment : "#container",
            tolerance:"pointer",
            helper : 'clone',
            refreshPositions: true ,
            revert : 'invalid',
            opacity:.4,
        });

        $(".drop_list ol").droppable({
            revert:true,
            //hoverClass : 'ui-state-highlight',
            greedy: true,
            refreshPositions: true,
            drop : function(ev, ui) 
            {
                $(ui.draggable).clone().appendTo(this);
                if($(this)[0].id === "sortable")
                {
                    console.log($(this).closest("button").find('.hello'));
                    $(this).find('.hello').hide();
                    $(this).find('.AH_section').show();
                    //$(ui.draggable).draggable( 'disable' ); //this will not append dragged list at top of the container
                    ui.draggable.draggable( 'disable' ).closest('li').prependTo(ui.draggable.closest('ul')); //this will append dragged list at top of the container
                    return true;
                }
            }
        });
    });

Answer 1

将data-id='article_<?php echo $i;?>' 更改为id='<?php echo $i;?>'

将此添加到您的sortable()，

update: function (event, ui) {
         var serial=$(this).sortable('serialize');
             save_sortable(serial);
}

所以在更新时，您正在从 ajax 调用 save_sortable() 函数，按照从 sortable() 返回的顺序更新您的数据库

function save_sortable(serial)
{
      $.ajax({
         url: "path to your file to update in db.",
         type: 'POST',
         data: serial,
         success: function (data) {
                  //alert(data);
         }
      });
}

Answer 2

你可以给li添加一些id属性，在我的例子中是get_id。 然后在需要时调用下面的函数onDropSendSort();，即在drop之后。

<li data-id='article_<?php echo $i;?>' get_id="<?php echo $object_id; ?>" class="draggable_li qitem" >

function onDropSendSort() {
  var data = []; 
  $('#draggable li').each(function() {
      var id = $(this).attr('get_id');
      data.push(id);
  });

 // data = [id_1, id_3, id_n];

  $.ajax({  
    url: 'some_url',
    type: 'POST',
    data: {sort: data},
    complete: function(res) {
      console.info(res);
    }
  });
}