谁能帮我如何在拖动时保存包装元素的顺序。然后按保存的顺序重新排序包装物品。?这是我之前使用的代码
<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>
提前谢谢。 :)
使用我为您的问题创建的这个函数:
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();