1. 程式人生 > >整理一份拖拽排序自動儲存的程式碼,後臺是php

整理一份拖拽排序自動儲存的程式碼,後臺是php

<style>
    .tuozhuaitr{
        cursor: pointer;
    }
</style>
<table width="100%" class="m-table" id="sort">
    <tbody>
        <tr class="tuozhuaitr" onmousedown="pressdown(id ,event);">
            <td>1</td>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr class="tuozhuaitr" onmousedown="pressdown(id ,event);">
            <td>2</td>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
    </tbody>
</table>
<script>
    $(document).ready(function () {
        var fixHelperModified = function (e, tr) {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function (index) {
                    $(this).width($originals.eq(index).width())
                });
                return $helper;
            },
            updateIndex = function (e, ui) {
                $('td.index', ui.item.parent()).each(function (i) {
                    $(this).html(i + 1);
                });
            };
        $("#sort tbody").sortable({
            helper: fixHelperModified,
            stop: updateIndex
        }).disableSelection();
    });
    function pressdown(id, event) {

        var oldid = [];
        var newid = [];
        var diffid = [];
        var i = 0;
        var heightYold = event.clientY;//獲取滑鼠按下時的y座標
        $(".paixuid").each(function () {
            oldid.push($(this)[0]['innerHTML']);
        });
        $(this).mouseup(function (e) {
            var heightYnew = e.clientY;//獲取滑鼠up時的y座標
            $(".paixuid").each(function () {
                newid.push($(this)[0]['innerHTML']);
            });
            for (i = 0; i < oldid.length; i++) {
                if (oldid[i] != newid[i]) {
                    diffid.push(i);
                }
            }
            // debugger;
            if (heightYnew > heightYold) {
                //向下拖拽
                var diffbig = diffid[diffid.length-1];
                var yidongid = newid[diffbig];//查詢移動的id
                //以diffbig位為參考
                var yidongorder = oldid[diffbig];
                var tuozhuaistyle = 1;//向下拖拽
            } else if (heightYold > heightYnew) {
                //向上拖拽
                var diffbig = diffid[0];
                var yidongid = newid[diffbig];
                var yidongorder = oldid[diffbig];
                var tuozhuaistyle = 2;//向上拖拽
            } else {

            }
            if (yidongid && yidongorder) {
                $.post('./index.php?c=userpublic&a=tuozhuai', {tuozhuaistyle:tuozhuaistyle,yidongid: yidongid, yidongorder: yidongorder, newid: newid, chengenum: diffbig}, function (data) {
                    location.reload();
                });
            }
        });
    }
</script>

<?php 
//拖拽
    public function tuozhuaiAction()
    {
        $yidongid = Request::post('yidongid');//移動的ID
        $tuozhuaistyle = Request::post('tuozhuaistyle');//拖拽的方式
        $yidongorder = Request::post('yidongorder');//移動ID要參考的排序數的ID
        $chengenum = Request::post('chengenum');//要修改的數量
        $newid = Request::post('newid');//新排列
        $cankaoorder = $this->db->setTableName('content')->find($yidongorder);//參考的排序數
        $yidong = $this->db->setTableName('content')->find($yidongid);//參考的排序數
        if ($yidong['topstate'] == 1 && $cankaoorder['topstate'] == 1) {
            $data_be['topnum'] = $cankaoorder['topnum'];
            if ($yidong['topnum'] > $cankaoorder['topnum']) {
                $where = ' (topnum between ' . $cankaoorder['topnum'] . ' and ' . $yidong['topnum'] . ")and catid =" . $yidong['catid'];
            } else if ($yidong['topnum'] < $cankaoorder['topnum']) {
                $where = ' (topnum between ' . $yidong['topnum'] . ' and ' . $cankaoorder['topnum'] . ")and catid =" . $yidong['catid'];
            }
            $tuozhuai = $this->db->setTableName('content')->where($where)->getAll();//參考的排序數

            foreach ($tuozhuai as $v) {
                if ($v['id'] == $yidongid) {
                    $this->db->setTableName('content')->update(array('topnum' => $cankaoorder['topnum']), 'id=?', $yidongid);
                } else {
                    if ($tuozhuaistyle == 1) {
                        $this->db->setTableName('content')->update(array('topnum' => $v['topnum'] + 1), 'id=?', $v['id']);
                        //向下拖拽
                    } else if ($tuozhuaistyle == 2) {
                        //向上拖拽
                        $this->db->setTableName('content')->update(array('topnum' => $v['topnum'] - 1), 'id=?', $v['id']);
                    }
                }
            }
        }
        if ($yidong['topstate'] == 0 && $cankaoorder['topstate'] == 0) {
            $data_be['listorder'] = $cankaoorder['listorder'];
            if ($yidong['listorder'] > $cankaoorder['listorder']) {
                $where = ' (listorder between ' . $cankaoorder['listorder'] . ' and ' . $yidong['listorder'] . ")and catid =" . $yidong['catid'];
            } else if ($yidong['listorder'] < $cankaoorder['listorder']) {
                $where = ' (listorder between ' . $yidong['listorder'] . ' and ' . $cankaoorder['listorder'] . ")and catid =" . $yidong['catid'];
            }
            $tuozhuai = $this->db->setTableName('content')->where($where)->getAll();//參考的排序數
            foreach ($tuozhuai as $v) {
                if ($v['id'] == $yidongid) {
                    $this->db->setTableName('content')->update($data_be, 'id=?', $yidongid);
                    continue;
                }
                if ($tuozhuaistyle == 1) {
                    $this->db->setTableName('content')->update(array('listorder' => $v['listorder'] + 1), 'id=?', $v['id']);
                    //向下拖拽
                } else if ($tuozhuaistyle == 2) {
                    //向上拖拽
                    $this->db->setTableName('content')->update(array('listorder' => $v['listorder'] - 1), 'id=?', $v['id']);
                }
            }
        }
    }
?>

思路僅供參考