Question

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

在顶级div部分我正在执行Sortable JQUery操作我的下一个要求是当我在顶部执行排序操作时，它的顺序应该在我的MYSQL DB中自动更新我必须被卡住，就像如何将排序的顺序传递给我MySQL db通过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);
}

所以在更新时，您正在调用save_sortable()函数，从ajax，按照从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);
    }
  });
}

Jquery UI可排序，将命令写入MySql数据库

2 个答案: