*{margin: 0 auto;}
.dragdiv{border: 2px solid black;height: 100px;width: 800px;margin-top: 20px;}
span{background: red;width: 50px;height: 50px;margin: 20px;display: inline-block;}
.top span{
background: #f9f9f9;
border: 1px solid #fbfbfa;
border-radius: 6px;
width: 50px;
height: 50px;
font-size: 16px;
margin: 9px;
margin-top: 1px;
padding: 9px;
display: inline-block;
text-align: left;
overflow: hidden;
vertical-align: top;
}
.top span:HOVER,.bottom ul li:HOVER{background: #D1D1D1}
input{
border: none;
background: none;
height: 24px;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.bottom_right{
padding: 0px;
}
ul,li{
margin: 0px;
padding: 0px;
list-style: none;
}
ul{
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
border-bottom: 1px solid #C9C9C9;
}
ul:last-child{border-bottom: none;}
.bottom_right ul li{
box-sizing: border-box;
width: calc((100% - 10px) / 10);
width:-moz-calc((100% - 10px) / 10);
width:-webkit-calc((100% - 10px) / 10);
border-left: 1px solid #C9C9C9;
height: 50px;
flex:auto;
line-height: 50px;
}
li .span{
width: 100%;
height: 100%;
display: block;
overflow: hidden;
position: relative;
}
li .span div{
width: 11px;
height: 11px;
padding: 1px;
font-size: 12px;
position: absolute;
right: 1px;
top: 1px;
}
.bottom_right ul li.selected,
.bottom_right ul li.temp-selected{background: #D1D1D1}
$(function(){
//隐藏页面，防止加载时排版混乱
$(".List_div1").hide();
$("input").prop("readonly","readonly");
$(".div1").show();
drag.init('List_div1',"scheduling/schedulingAdd");
//手术室内部拖拽
initSelectBox('.bottom_right',"拖拽路径","删除路径");
});
//点击任意位置，去除 class：selected
$("body").on("click",function() {
$(".bottom_right li").removeClass('selected');
});
//鼠标悬停
$(".bottom ul li").hover(function() {
$(this).css({'background':'#D1D1D1','color':'black'});
},function(){
$(this).removeAttr("style");
});
//拖拽
var drag = {
class_name : null, //允许放置的容器
permitDrag : false, //是否允许移动标识
_x : 0, //节点x坐标
_y : 0, //节点y坐标
_left : 0, //光标与节点坐标的距离
_top : 0, //光标与节点坐标的距离
old_elm : null, //拖拽原节点
tmp_elm : null, //跟随光标移动的临时节点
new_elm : null, //拖拽完成后添加的新节点
url : null, //ajax跳转路径
//初始化
init : function (className,url){
//允许拖拽节点的父容器的classname(可按照需要，修改为id或其他)
drag.class_name = className;
//ajax跳转路径
drag.url=url;
//监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
$('.' + drag.class_name).on('mousedown', '.top span', function(event){
//当在允许拖拽的节点上监听到点击事件，将标识设置为可以拖拽
drag.permitDrag = true;
//获取到拖拽的原节点对象
drag.old_elm = $(this);
//执行开始拖拽的操作
drag.mousedown(event);
return false;
});
//监听鼠标 移动
$(document).mousemove(function(event){
//判断拖拽标识是否为允许，否则不进行操作
if(!drag.permitDrag) return false;
//执行移动的操作
drag.mousemove(event);
return false;
});
//监听鼠标放开
$(document).mouseup(function(event){
//判断拖拽标识是否为允许，否则不进行操作
if(!drag.permitDrag) return false;
//拖拽结束后恢复标识到初始状态
drag.permitDrag = false;
//执行拖拽结束后的操作
drag.mouseup(event);
return false;
});
},
//按下鼠标 执行的操作
mousedown : function (event){
//1.克隆临时节点，跟随鼠标进行移动
drag.tmp_elm = $(drag.old_elm).clone();
//2.计算 节点 和 光标 的坐标
drag._x = $(drag.old_elm).offset().left;
drag._y = $(drag.old_elm).offset().top;
var e = event || window.event;
drag._left = e.pageX - drag._x;
drag._top = e.pageY - drag._y;
//3.修改克隆节点的坐标，实现跟随鼠标进行移动的效果
$(drag.tmp_elm).css({
'position' : 'absolute',
'background-color' : '#D1D1D1',
'left' : drag._x,
'top' : drag._y,
});
//4.添加临时节点
tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
drag.tmp_elm = $(tmp).find(drag.tmp_elm);
$(drag.tmp_elm).css('cursor', 'move');
},
//移动鼠标 执行的操作
mousemove : function (event){
//2.计算坐标
var e = event || window.event;
var x = e.pageX - drag._left;
var y = e.pageY - drag._top;
var maxL = $(document).width() - $(drag.old_elm).outerWidth();
var maxT = $(document).height() - $(drag.old_elm).outerHeight();
//不允许超出浏览器范围
x = x < 0 ? 0: x;
x = x > maxL ? maxL: x;
y = y < 0 ? 0: y;
y = y > maxT ? maxT: y;
//3.修改克隆节点的坐标
$(drag.tmp_elm).css({
'left' : x,
'top' : y,
});
//判断当前容器是否允许放置节点
$.each($('.' + drag.class_name + ' .bottom ul li'), function(index, value){
//获取容器的坐标范围 (区域)
var box_x = $(value).offset().left; //容器左上角x坐标
var box_y = $(value).offset().top; //容器左上角y坐标
var box_width = $(value).outerWidth(); //容器宽
var box_height = $(value).outerHeight();//容器高
//给可以放置的容器加背景色
if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y &&
e.pageY < box_y-0+box_height && $(value).find("span").length<=0
){
//判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
if($(value).offset().left !== drag.old_elm.parent().offset().left
|| $(value).offset().top !== drag.old_elm.parent().offset().top){
$(value).css('background-color', '#D1D1D1');
}
}else{
//恢复容器原背景色
$(value).removeAttr("style");
}
});
},
//放开鼠标 执行的操作
mouseup : function (event){
//移除临时节点
$(drag.tmp_elm).remove();
//判断所在区域是否允许放置节点
var e = event || window.event;
$.each($('.' + drag.class_name + ' div ul li'), function(index, value){
//获取容器的坐标范围 (区域)
var box_x = $(value).offset().left; //容器左上角x坐标
var box_y = $(value).offset().top; //容器左上角y坐标
var box_width = $(value).outerWidth(); //容器宽
var box_height = $(value).outerHeight();//容器高
//判断放开鼠标位置是否想允许放置的容器范围内
if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y &&
e.pageY < box_y-0+box_height && $(value).find("span").length<=0
){
//判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
if($(value).offset().left !== drag.old_elm.parent().offset().left
|| $(value).offset().top !== drag.old_elm.parent().offset().top){
//向目标容器添加节点
tmp = $(drag.old_elm).clone();
var newObj;
//newObj=$(value).append(ht);
//要传到后台的数据
var id=tmp.find('input[name="id"]').val(),
page="schedulingList",
type=$(value).index()+1,
department=$(value).index(),
time=$(value).parent().index();
//保存路径
$.ajax({
type: "POST",
url: drag.url,
dataType: "json",
data: {
"id":id, "page":page,
"type":type, "department":department,
"time":time, "date": $("#dt").val()
},
success: function (data) {
//将数据重新绑定到排班上
html(data);
},
error: function (data) {
html(data);
}
});
//删除原节点
$(drag.old_elm).remove();
//获取新添加节点的对象
//drag.new_elm = $(newObj).find(tmp);
}
}
//恢复容器原背景色 class_name
$(value).removeAttr("style");
});
},
};
var initSelectBox = function(selector, url, delUrl, selectCallback) {
function clearBubble(e) {
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
var $container = $(selector);
var vv=null,
va=null;
var arrs = [];
// 框选事件
$container
.on('mousedown', function(eventDown) {
// 设置选择的标识
var isSelect = "up";
// 设置选框的初始位置
var startX = eventDown.x || eventDown.pageX;
var startY = eventDown.y || eventDown.pageY;
// 遍历容器中的选项，获取选中的列
$(selector).find('li').each(function(i,txt) {
var $item = $(this);
var itemX_pos = $item.prop('offsetWidth') + $item.prop('offsetLeft');
var itemY_pos = $item.prop('offsetHeight') + $item.prop('offsetTop');
var condition1 = itemX_pos > startX;
var condition2 = itemY_pos > startY;
var condition3 = $item.prop('offsetLeft') < startX;
var condition4 = $item.prop('offsetTop') < startY;
if (condition1 && condition2 && condition3 && condition4) {
vv=$item.index();
}
});
// 根据鼠标移动，设置选框宽高
var _x = null;
var _y = null;
//var left;
// 清除事件冒泡、捕获
clearBubble(eventDown);
// 监听鼠标移动事件
$(selector).on('mousemove', function(eventMove) {
// 根据鼠标移动，设置选框的位置、宽高
_x = eventMove.x || eventMove.pageX;
_y = eventMove.y || eventMove.pageY;
// 暂存选框的位置及宽高，用于将 select-item 选中
var _left = Math.min(_x);
var _top = Math.min(_y, startY);
var _width = Math.abs(_x);
var _height = Math.abs(_y - startY);
// 遍历容器中的选项，进行选中操作
$(selector).find('li').each(function(i,txt) {
var $item = $(this);
var itemX_pos = $item.prop('offsetWidth') + $item.prop('offsetLeft');
var itemY_pos = $item.prop('offsetHeight') + $item.prop('offsetTop');
// 判断 li 是否与选框有交集，添加选中的效果（ temp-selected ，在事件 mouseup 之后将 temp-selected 替换为 selected）
var condition1 = itemX_pos > _left;
var condition2 = itemY_pos > _top;
var condition3 = $item.prop('offsetLeft') < _left;//(_left + _width);
var condition4 = $item.prop('offsetTop') < (_top + _height);
isSelect="move";
if (condition1 && condition2 && condition3 && condition4) {
$item.addClass('temp-selected');
if($item.index()!=vv && $item.find("span").length>0){
$item.removeClass('temp-selected');
}
}
else if($item.index()!=vv || $item.find("span").length<=0){
$item.removeClass('temp-selected');
}
});
// 清除事件冒泡、捕获
clearBubble(eventMove);
});
$(document).on('mouseup', function() {
$(selector).off('mousemove');
if(isSelect=="move"){
$(selector)
.find('li.temp-selected')
.removeClass('temp-selected')
.addClass('selected');
$('.selected').each(function(i) {
//垂直移动时
if(vv==$(this).index()){
//有 span 标签，克隆本次循环span，添加class，方便水平移动时，保存源节点
if($(this).find(".span").length > 0){
va=$(this).find(".span").clone();
$(this).addClass('selectedww');
return true;
}
//没有 span 标签，添加class，保存新节点，删除全部class ‘selectedww’
else{
$(this).addClass('selectedw');
$(selector).find("li").removeClass('selectedww');
}
}
//水平移动时，添加class，保存要新节点
if($(this).find("span").length<=0 && vv!=$(this).index()){
$(this).addClass('selectedwww');
}
});
var page,
//源节点所在列
ss=$('.selectedww').index()+1;
//需要传到后台
var id=[], //添加的节点id，方便后台查询
pId=[], //添加的节点，pId
type=[], //添加的节点，几号手术室/状态
department=[], //添加的节点，手术室/列
time=[], //添加的节点，时间/行
de_id = []; //源节点的id，方便后台删除
//如果有 selectedwww 这个class，就是水平移动
if($('.selectedwww').hasClass("selectedwww")){
//遍历源节点
$('.selectedww').each(function(i) {
arrs.push($(this).find(".span input[name='id']").val());
//源节点的pId
var ts=[$(this).find(".span input[name='pId']").val()];
//遍历源节点的所在列
$('.bottom_right ul li:nth-child('+ss+')').each(function(j) {
//如果本次循环的pId == 源节点的pId，保存源节点的id
if($(this).find('.span input[name="pId"]').val() == ts){
de_id.push($(this).find('.span input[name="id"]').val());
//$(this).find('.span').remove();
}
});
});
//数组去重
arrs.unique3();
//数组去除 undefined
de_id.unique1();
//需要传到后台的值
$('.selectedwww').each(function(i) {
id[i]=arrs[i];
type[i]=$(this).index()+1;//几号手术室/状态
department[i]=$(this).index();//手术室/列
time[i]=$(this).parent().index();//时间/行
});
page="update";
}
//垂直移动添加
//$('.selectedw').append(va);
//垂直移动，如果有 selectedw 这个class
if($('.selectedw').hasClass("selectedw") && (va!=null && va!="")){
//需要传到后台的值
$('.selectedw').each(function(i) {
id[i]=va.find('input[name="id"]').val();
type[i]=$(this).index()+1;//几号手术室/状态
department[i]=$(this).index();//手术室/列
time[i]=$(this).parent().index();//时间/行
});
page="add";
}
if(id.length>0){
$.ajax({
type: "POST",
url: url,
dataType: "json",
traditional: true,
data: {
"id":id, "de_id":de_id,
"page":page, "type":type,
"department":department,
"time":time, "date": $("#dt").val()
},
success: function (data) {
//将数据重新绑定到排班上
html(data);
},
error: function (data) {
html(data);
}
});
}
$(selector).find("li").removeClass('selected selectedw selectedww selectedwww');
va=null,arrs=[],de_id=[];
if (selectCallback) {
selectCallback();
}
}
else{
//解除删除的绑定，防止重复删除
//$(".bottom_right ul li .span div").off('click');
//删除排班人员
$(".bottom_right ul li .span div").on("click",function() {
var id=$(this).parent().find('input[name="id"]').val();
var d=$(this).parent().parent().index();
if(confirm('确定要删除吗?'))
{
$.ajax({
type: "POST",
url: delUrl,
dataType: "json",
traditional: true,
data: {
"id":id, "d":d,
"date":$("#dt").val()
},
success: function (data) {
//将数据重新绑定到排班上
html(data);
},
error: function (data) {
html(data);
}
});
//alert(id);
//window.location.href="scheduling/schedulingDel?id="+id+"&date="+$("#dt").val();
return true;
}
return false;
});
}
});
});
};
//数组去除 undefined
Array.prototype.unique1 = function(){
var res = [];
for(var i = 0; i < this.length; i++){
if(typeof(this[i])!='undefined' && this[i]!="") {
res.push(this[i]);
}
}
return res;
};
//数组去重
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
