您现在的位置是：网站首页 > 心得笔记
s使用idrag完成模块拖动
简介很早之前在做项目的时候，有这样一个需求：可任意调整统一课程下的不同课时，在页面上拖动调整后数据实时入库的效果。当时是手动通过定时任务写的，现如今总结出了另一个通过插件包完成该需求的方案
运行效果：
数据库设计：
控制器：
public function index(){
$sort_arr = DB::table('test')->orderBy('id','asc')->get();
$sort_Array = [];$sort_id = [];
foreach ($sort_arr as $value) {
$sort_arr->sort = DB::table('test')->where('id',$value->id)->pluck('sort')[0];
$sort_Array[] = $sort_arr->sort;
$sort_id[] = $value->id;
}
$sort_str = join(',', $sort_Array);
$sort_id_str = join(',', $sort_id);
return view('front.test.qqlogin',compact('sort_arr','sort_str', 'sort_id_str'));
}
public function test (Request $request) {
$old = $request->input('older');//1,2,3 老的顺序
$new = $request->input('id');//3,1,2 新的顺序
$sort_id_array = explode(',',$request->input('sort_id_str'));
if (!empty($new)) {
if ($old != $new) {
$newArray = explode(',',$new);
$result = '';
foreach ($sort_id_array as $key => $value) {
$result = DB::table('test')->where('id',$value)->update(['sort'=>$newArray[$key]]);
}
return 1;//这里仅限于测试 ，所以始终返回true
}
}html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<style type="text/css">
#module_list{margin-left:4px}
.modules{float:left; width:200px; height:140px; margin:10px; overflow:hidden; border:1px solid #acc6e9; background:#e8f5fe}
.m_title{height:24px; line-height:24px; background:#afc6e9}
#loader{height:24px; text-align:center}
.clear{clear:both}
</style>
</head>
<body>
<form action="" method="POST">
<input type="hidden" name="_token" id="_token" value="{{ csrf_token() }}">
<div id="main">
<div id="loader"></div>
<div id="module_list">
<input type="hidden" name="sort" id="orderlist" value="{{$sort_str}}" />
<input type="hidden" name="sort_id_str" value="{{$sort_id_str}}" />
@foreach ($sort_arr as $value)
<div class="modules" title="{{$value->id}}">
<h3 class="m_title">{{$value->title}}</h3>
<p>id={{$value->id}} —— 序号={{$value->sort}}</p>
</div>
@endforeach
<div class="clear"></div>
</div>
</div>
</form>
<script type="text/javascript" src="/admin/js/jquery-1.4.2.min.js"></script>
<script type='text/javascript' src='/admin/js/browser.js'></script>
<script type='text/javascript' src='/admin/js/jquery-ui.min.js'></script>
<script type="text/javascript" src="/admin/js/idrag.js"></script>
</body>
</html>idrag.js：
// JavaScript Document
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(function(){
$(".m_title").bind('mouseover',function(){
$(this).css("cursor","move")
});
var $show = $("#loader"); //进度条
var $orderlist = $("#orderlist");
var $list = $("#module_list");
$list.sortable({
opacity: 0.6,
revert: true,
cursor: 'move',
handle: '.m_title',
dropOnEmpty:true,
update: function(){
var new_order = [];
$list.children(".modules").each(function() {
new_order.push(this.title);
});
var newid = new_order.join(',');
var oldid = $orderlist.val();
var sort_id_str = $("input[name='sort_id_str']").val();
$.ajax({
type: "post",
url: "/test",
dataType:'json',
data: { id: newid, order: oldid, sort_id_str:sort_id_str}, //id:新的排列对应的ID,order：原排列顺序
beforeSend: function() {
$show.html("<img src='/load.gif' /> 正在更新");
},
success: function() {
alert('顺序移动成功！');
$show.html("");
window.location.reload();
},
error:function(){
alert('顺序移动失败！');
$show.html("");
window.location.reload();
}
});
}
});
});js下载地址：
https://blog.blonglee.me/admin/js/jquery-1.4.2.min.js https://blog.blonglee.me/admin/js/browser.js https://blog.blonglee.me/admin/js/jquery-ui.min.js