Packery 保存订单并重复使用订单

Question

任何人都可以帮助我如何在拖动时保存包装元素的顺序。然后在保存的订单中重新订购包装物品。这是我之前使用的代码

<div class="g_container">
           <?php foreach($_POST['old_img'] as $key=>$val){ ?>
               <div class="item" tabindex="<?php echo $key; ?>">
                <img src="../img/gallery/<?php echo $val; ?>">
               </div>
             <?php } ?>
           </div>

这是 javascript 代码。

<script src="../js/packery.pkgd.min.js"></script>
    <script src="../js/draggabilly.js"></script>
    <script>
    $(document).ready(function(){
   // Packery // 
 var $container = $('.g_container').packery({
   gutter:10
 });

 $container.find('.item').each( function( i, itemElem ) {
   // make element draggable with Draggabilly
   var draggie = new Draggabilly( itemElem );
   // bind Draggabilly events to Packery
   $container.packery( 'bindDraggabillyEvents', draggie );
 });
  $("#save_gallery").on("click",function(){
   var page_name=$("#pn").val();
   var gallery=$(".gallery").html();
   $.ajax({
     data:"gallery="+gallery+"&pn="+page_name,
     method:"POST",
     cache:false,
     url:"ajax/save-gallery.php",
     success:function(data){
      alert(data);
      //location.href="page-galleries.php";
     }
    });
  });
 });
</script>

提前致谢。 :)

Answer 1

使用我为您的问题创建的函数：

var $itemElems = $($container.packery('getItemElements'));
orderItems = function() {
    var itemElems = $($container.packery('getItemElements'));
    $(itemElems).each(function(i, itemElem) {
        $(itemElem).attr('data-module-index', i); 
        // adds a data attribute called data-module-index to the element  
        //   and makes the value its actual index.
    });
};
orderItems();

Packery 保存订单并重复使用订单

Packery Save order and reuse the order

javascript

packery