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

Posted 2023-05-09

【中文标题】Jquery UI 可排序，将订单写入 MySql 数据库

【英文标题】：Jquery UI sortable, write order into a MySql database

【发布时间】：2016-01-06 23:46:32

【问题描述】：

我目前正在使用 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;
                
            
        );
    );

【参考方案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);
         
      );

【讨论】：

很高兴它帮助了你，如果它帮助了你，别忘了接受答案。

【参考方案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);
    
  );

【讨论】：

非常感谢您帮助我，感谢您的建议和宝贵的时间谢谢！！