jQuery UI 可排序图像答案

【问题标题】：jQuery UI sortable imagesjQuery UI 可排序图像
【发布时间】：2014-03-01 14:49:27
【问题描述】：

您好，我需要一些帮助，因为我的 jQuery 技能不太好。我想要实现的是更改图像的顺序，如this 示例。

我的数据库如下所示：

table: Gallery
img_id (pk)
image
caption
order

我还创建了这两个视图： index.php

<!-- will display the ajax result -->
<div id="orderResult"></div>
<hr/>
<input type="button" id="save" value="Save Order" class="btn btn-primary">

<script type="text/javascript">
    $(function () {
        $.post('<?php echo site_url('admin/galleries/order_ajax'); ?>', {}, function(data) {
            $('#orderResult').html(data);
        });

        // save order
       $('#save').click();
    });
</script>

order_ajax.php

<?php if(count($images)>0): ?>
<div class="sortable-list">
    <ol id="sortable">
        <?php foreach($images as $image): ?>
        <li <?php echo 'id="li_'.html_escape($image->img_id).'"'; ?>><?php echo img(array('src' => 'uploads/thumbs/'.html_escape($image->image)); ?></li>
        <?php endforeach; ?>
    </ol>
</div>  
<?php endif; ?>

<script type="text/javascript">
    $(function() {
         $( "#sortable" ).sortable();
         $( "#sortable" ).disableSelection();
    });
</script>

我还创建了 order_ajax 控制器

public function order_ajax(){
 // save order from pages
 var_dump($_POST);

  // if (isset($_POST['sortable'])) {
  // $this->gallery->save_order($_POST['sortable']);
  // }

 // fetch all images (fetch all data)
 $this->data['images'] = $this->gallery->get();

 // load the view
 $this->load->view('admin/gallery/order_ajax', $this->data, false);
}

所以我基本上想要做的是拖动图像以更改它们的顺序，当我单击保存按钮时，将（新）数据/顺序传递给控制器并将它们存储在数据库中。我怎样才能做到这一点？

【问题讨论】：

您通过 AJAX 将 JSON 发送到 PHP 文件（控制器+方法）并将订单保存到数据库。我不知道可排序插件返回什么样的数据。
我做了更新，请查看。

标签： php jquery jquery-ui codeigniter jquery-ui-sortable

【解决方案1】：

嗯，解决方案比我想象的要简单。

在 index.php 视图上我放了这个

<script type="text/javascript">
    $(function () {
        $.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", {}, function(data) {
            $('#orderResult').html(data);
        });

        // save order
        $('#save').click(function(){
            var new_order = $("#sortable").sortable( "toArray" );

            $.post("<?php echo site_url('admin/galleries/order_ajax'); ?>", { order_array: new_order }, function(data) {
                    $('#orderResult').html(data);
                });
        });  
    });
</script>

这是控制器功能

public function order_ajax(){
    // save order from pages
    if (isset($_POST['order_array'])) {
        $this->gallery_model->save_order($_POST['order_array']);
    }

    // fetch all images
    $this->data['images'] = $this->gallery->get();

    // load the view
    $this->load->view('admin/gallery/order_ajax', $this->data, false);
}

【讨论】：