JQuery easyUI拖拽效果运用到排班
最近做了一个医院的项目，项目中有一个功能是排班，具体的意思就是将某个医生或护士排在周几的门诊或病房值班，公司领导要求用拖动来实现排班，正好项目中运用的前台框架是easyUI,easyUI中有拖动的功能。
先截几张图让大家了解一下流程：
1.选择科室
2.点击排班按钮后进入排班页面
3.鼠标放到某个员工上时鼠标将变为可拖动的形状，可按住鼠标将其拖到想要放入的框中，效果如下图：
4.点击提交按钮后可将排好的信息进行保存，回到选择科室界面，点击排班浏览，效果如下图：
上面是做出来的效果。代码实现如下：（只贴出实现拖动那部分代码）
//打开排班窗口
function openDepartmentScheduleDialog (data) {
//将部门ID的隐藏域中赋值
$("#bumenId").val(data.id);
//清空垃圾箱的数据
$("#target").empty();
//移除排班至垃圾箱的方法
delPanBan();
//获得排班信息
$.getJSON("getDoctorById.do",{"bumenId":data.id},function(doctors){
if (null == doctors || "" == doctors) {
$("#departmentSchedule .targetarea").empty();
//$.messager.alert('提示消息','数据加载失败!','info');
} else {
showPanBan1(doctors);
}
});
$("#departmentSchedule").css("width",$(window).width()-20);
$("#departmentSchedule").css("height",$(window).height()-20);
$("#PbBlock").css("height",$(window).height()-100);
//hasData = true;
//加载员工列表数据
$('#employee').datagrid({
title:'<font color="black"> 医生列表</font>',
iconCls: 'icon-save',
width:'140',
height:$(window).height()-100,
nowrap: false,
striped: true,
url:'../employeeConnectBook/pageAllQueryEmployee.do',
sortName: 'id',
sortOrder: 'desc',
idField:'id',
columns:[[
{field:'emName',title:'姓名',width:80,align:'center',
formatter:function(value, rec) {
//alert(value+"===="+rec.telPhone);
return '<div name="doc" style="color:black;width: 70px;height:23px;background-color:#a1d5c8;line-height:23px;border:1px gray solid;"><input type="hidden" name="docid" value="'+rec.id+'"/>'+value+'</div>';
}
}
]],
onBeforeLoad:function(){
$('#employee').datagrid('clearSelections');
},
onLoadSuccess:function(){
//员工数据加载完成后使之可以拖动，并让排班框可以存放排班人员有个全局标识，标识为TRUE时表示有数据了
//然后让定时器执行排班方法，排班方法中再让标识变为FALSE
hasData = true;
if(hasData == true) {
setInterval('doPanBan()',1000);
}
},
rownumbers:true,
singleSelect:false,
queryParams:{"id":data.id}//查询条件
});
//if(hasData == true) {
// setInterval('doPanBan()',1000);
//}
$("#departmentSchedule").dialog({title:"排班"});
$('#departmentSchedule').dialog({
onClose:function(){
if($.browser.msie&&$.browser.version=='6.0'){
this.href = '#';
}
location.href="departmentSchedule.html";
},
buttons:[{
text:'提交',
iconCls:'icon-ok',
handler:function(){
//在对医生排班之后会生成一个隐藏域，存放的值的格式是（排班类别_时段_周几_医生ID)
//alert($("#aa").html());
$("#addDoctor").submit();
//$.messager.alert('提示消息','排班成功!','info');
//$('#departmentSchedule').dialog('close');
if($.browser.msie&&$.browser.version=='6.0'){
this.href = '#';
}
location.href="departmentSchedule.html";
}
},{
text:'返回',
iconCls:'icon-cancel',
handler:function(){
if($.browser.msie&&$.browser.version=='6.0'){
this.href = '#';
}
location.href="departmentSchedule.html";
}
}]
});
}
//显示排班数据的方法
function showPanBan1(data) {
//将所有的框框清空
$("#departmentSchedule .targetarea").empty();
//解析从后台获取的数据，将对应的人员放入对应的框中
for(var i = 0; i < data.length; i ++) {
//alert(data[i].id);
var svalue = data[i].type+"_"+data[i].sect+"_"+data[i].weekday;
var ovalue = svalue+"_"+data[i].docId;
var obj = $('<div name="doc" style="color:black;width: 100%;height:23px;background-color:#d8e4fe;line-height:23px;border:1px gray solid;" id='+ovalue+'><input type="hidden" name="docid" value="'+ovalue+'"/>'+data[i].ryname+'</div>');
$("#departmentSchedule .targetarea").each(function(){
var tvalue = $(this).attr("value");
if(tvalue == svalue) {
$(this).append(obj);
}
});
}
}
//将人员拖入垃圾箱的方法
function delPanBan(){
$('#departmentSchedule').find("div:[name='doc']").each(function(){
$(this).draggable({
proxy:'clone',
revert:true,
cursor:'auto',
onStartDrag:function(){
$(this).draggable('options').cursor='auto';
$(this).draggable('proxy').addClass('dp');
},
onStopDrag:function(){
$(this).draggable('options').cursor='auto';
}
});
});
$('#target').droppable({
onDragEnter:function(e,source){
$(source).draggable('options').cursor='auto';
$(source).draggable('proxy').css('border','1px solid red');
},
onDragLeave:function(e,source){
if($(source).children().val().indexOf("_")!="-1") {
$(source).draggable('options').cursor='not-allowed';
$(source).draggable('proxy').css('border','1px solid #ccc');
}
},
onDrop:function(e,source){
if($(source).children().val().indexOf("_")!="-1") {
$(this).append(source);
$(source).css("display","none");
}
}
});
}
//显示排班
function showPanBan2(data) {
$("#viewDepartmentSchedule .targetarea").empty();
for(var i = 0; i < data.length; i ++) {
//alert(data[i].id);
var svalue = data[i].type+"_"+data[i].sect+"_"+data[i].weekday;
var ovalue = svalue+"_"+data[i].docId;
var obj = $('<div name="doc" style="color:black;width: 100%;height:23px;background-color:#efefef;line-height:23px;border:1px white solid;" id='+ovalue+'><input type="hidden" name="docid" value="'+ovalue+'"/>'+data[i].ryname+'</div>');
$("#viewDepartmentSchedule .targetarea").each(function(){
var tvalue = $(this).attr("value");
if(tvalue == svalue) {
$(this).append(obj);
}
});
}
}
//执行排班
function doPanBan(){
if(hasData == true) {
//alert($("div:[name='doc']").length);
//alert("doPanBan() running..");
if($("div:[name='doc']").length>=0) {
$("div:[name='doc']").each(function(){
$(this).draggable({
revert:true,
deltaX:10,
deltaY:10,
proxy:function(source){
var n = $('<div class="proxy"></div>');
n.html($(source).html()).appendTo('body');
return n;
}
});
})
$(".targetarea").droppable({
//进入该区域时执行的函数
onDragEnter:function(e,source){
$(this).addClass('over');
},
//离开该区域时执行的函数
onDragLeave:function(e,source){
$(this).removeClass('over');
},
//在该区域放下时执行的函数
onDrop:function(e,source){
var txt = $(source);
//取得拖来的对象中的隐藏域的医生ID
var did = txt.children();
//判断是否是从列表中拖动的医生，如果是将其值追加到当前DIV的VALUE属性的值后面，作为新的隐藏域的值，此值的格式为 “排班类别_时段_周几_医生ID”
if(did.val().indexOf("_")==-1) {
var newValue = $(this).attr("value")+"_"+did.val();
} else{
var newValue = $(this).attr("value")+"_"+did.val().split("_")[3];
}
if($(this).find("#"+newValue+"").length == 0) {
$(this).append("<div name='doc' id='"+newValue+"' style='height:23px;border:1px gray solid;background-color:#96bdc3;line-height:23px;'><input type='hidden' name='docid' value='"+newValue+"'/>"+$(source).html().split(">")[1]+"</div>");
}
$(this).removeClass('over');
//使拖放在框中的DIV也可以拖动
$("div:[name='doc']").each(function(){
$(this).draggable({
proxy:'clone',
revert:true,
deltaX:10,
deltaY:10,
proxy:function(source){
var n = $('<div class="proxy"></div>');
n.html($(source).html()).appendTo('body');
return n;
}
});
});
//alert($(this).html());
}
});
hasData = false;
}
}
}