整理一份拖拽排序自動儲存的程式碼,後臺是php
阿新 • • 發佈:2018-12-29
<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']); } } } } ?>
思路僅供參考