html代码
<html lang="zh-CN">
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta charset="utf-8">
</head>
<body>
<div>
<table class="frame">
<tr>
<td style="width: 5%;">
<div class="labelTitle">类别1</div>
</td>
<td style="width: 95%;">
<div class="labelBody" dataa="1" style="background-color: red" distanceTime="90" duration="65" id="abc">内容<br/>222</div>
<div class="labelBody" dataa="2" style="background-color: #b2dba1" distanceTime="0" duration="1919" id="abcd">内容<br/>送333</div>
<div class="labelBody" dataa="3" style="background-color: #b2dba1" distanceTime="120" duration="65" id="abcde">内容<br/>送444</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div class="labelTitle">类别2</div>
</td>
<td style="width: 95%;">
<div class="labelBody" dataa="5" style="background-color: red" distanceTime="300" duration="65" id="bc">内容<br/>送</div>
<div class="labelBody" dataa="4" style="background-color: red" distanceTime="260" duration="65" id="bcd">内容<br/>送</div>
</td>
</tr>
<tr>
<td style="width: 5%;">
<div class="labelTitle">类别3</div>
</td>
<td style="width: 95%;">
<div class="labelBody" dataa="7" style="background-color: red" distanceTime="150" duration="65" id="c">内容<br/>送</div>
<div class="labelBody" dataa="6" style="background-color: red" distanceTime="130" duration="65" id="cd">内容<br/>送</div>
</td>
</tr>
</table>
<table id="timeAxis" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" class="frame">
<tr id="timeAxisTr">
<td style="width:5%;" align="center">
用户\时间
</td>
</tr>
<tr style="height: 52px" class="driverTr" id="driverId">
<th>老司机1</th>
<div style="border-top:2px dashed #000;" class="dottedLine" id="driverIddottedLine"></div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 52px" class="driverTr" id="driverId2">
<th>老司机2</th>
<div class="dottedLine" id="driverId2dottedLine"></div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr style="height: 52px" class="driverTr" id="driverId3">
<th>老司机3</th>
<div style="border-bottom:2px dashed #000;" class="dottedLine" id="driverId3dottedLine"></div>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<div id="textbox" style="display: none;width: 100px;height: 100px;border:1px solid #000000;position:absolute;background-color: #adadad"></div>
<div id="divCopy" style="border:1px solid #000000;display: none;position:absolute;cursor:pointer;"></div>
</div>
<script type="text/javascript" src="designatePlatform.js"></script>
</body>
</html>css代码
<style type="text/css">
/* 带边框样式 宽为页面宽度 */
.frame { border:1px solid #000000;width:100%;}
/* 边框 和 银灰色背景色 和 居中效果 */
.labelTitle{ border:1px solid #000000;background-color: #d0d0d0;width:70px ;height:50px;margin-top: auto;margin-left:10%}
/* 带边框 div左对齐 */
.labelBody{ border:1px solid #000000;width:70px ;height:50px;float:left;cursor:pointer;/*鼠标手样式*/}
div{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 0px 10px;
-moz-box-shadow: #666 0px 0px 10px;
box-shadow: #666 0px 0px 10px;
}
.dottedLine{border-left:2px dashed #000;border-right:2px dashed #000;position:absolute;z-index:-1;display: none;}
</style>js代码
$(function () {
var isCopy = false;//是否触发copy方法
var isSelectDriver;//拖动后是否选中所选司机
var isLetGo;//释放复制的div
//div漂浮后鼠标与div左上角的距离
var divDistanceX;
var divDistanceY;
//需要添加一个判定条件 判定删选司机不为空*********************************************************************************************************************************************************************************************
var tdWidth = document.getElementById("timeAxis").rows[1].cells[1].offsetWidth;
var tdHeight = document.getElementById("timeAxis").rows[1].cells[1].offsetHeight;
$(".dottedLine").css('height',tdHeight-1);
//********************************************************************************************************************************************
var day = new Date(Date.parse("2018-12-31" + " 00:00:00".replace(/-/g,"/")));
// 遍历添加时间轴th开始
var el = "";
var time = 20;///时间轴th起始时间
var dayNumber = 0;// 时间轴天数
var hourNumber = 32;//时间轴th小时数
var timeAxisTr = document.getElementById("timeAxisTr");
for(var i = 0;i < hourNumber;i++){
var str = "";
if(time > 23){
time = 0;
++dayNumber;
if(dayNumber == 1)el = day.getMonth() + 1 + "-" + day.getDate() + "<br/>" + str;
if(dayNumber == 2){
day.setTime(day.getTime()+24*60*60*1000);
el =day.getMonth() + 1 + "-" + day.getDate() + "<br/>";
}
}
if(time < 10)str = 0;
timeAxisTr.innerHTML += "<th colspan='2' style='text-align: center'>"+ el + str + time+":00</th>"
++time;
el = "";
}
// 遍历添加时间轴th结束
/**
* 让copyDiv 跟随鼠标移动
*/
$(window).on('mousemove', function(e) {
if(isCopy){
var divcopy = document.getElementById("divCopy");
divcopy.style.left = e.pageX - divDistanceX + "px";
divcopy.style.top = e.pageY - divDistanceY + "px";
if(isCopy){
setDottedLine(divcopy);//设置虚线
}
}
});
/**
* 鼠标在订单上浮移动时触发的显示
*/
$(".labelBody").mousemove(function(event){
var div = document.getElementById("textbox");
if(div.style.display != "inline"){
div.style.display = "inline";
div.innerHTML = "<span>"+$(this).attr("dataa")+"</span>";
}
//设置左上角起点位置
div.style.left = event.clientX +10+ "px";
div.style.top = event.clientY + 10+"px";
//设置虚线
setDottedLine(this);
});
/**
* 鼠标在订单上按下鼠标左键时触发的显示
*/
$(".labelBody").mousedown(function(event){
if(event.button == 0 || event.button == 1){
divCopyfunction(this,false);
this.style.backgroundColor = '#e3e3e3';
setDottedLine(this);
}
});
/**
* 鼠标在订单上松开鼠标离开时触发的显示
*/
$(".labelBody").mouseout(function(){
document.getElementById("textbox").style.display = "none";
hideDottedLine();
});
/**
* 设置虚线
* @param orderDiv 订单标签Dom对象
*/
function setDottedLine(orderDiv){
if($(".dottedLine").css('display') != "inline") {
$(".dottedLine").css('display', 'inline');
}
var trArray = $("#timeAxis tr");
for(var i = 1;i < trArray.length;i++){
var tr = $(trArray[i]);
var dottedLineDiv = $("#" + tr.attr('id') + 'dottedLine');
var distanceTime = Number($(orderDiv).attr("distanceTime"));
var duration = Number($(orderDiv).attr("duration"));
//计算左上角坐标
var blankSpace = (except(distanceTime,30)+"").split(".")[0];//前面空余格数
var surplusTime = subtraction(distanceTime,multiplication(blankSpace,30));//剩余分钟数
var td = tr.children('td')[blankSpace];
var x = findPosX(td);
if(surplusTime > 0){
x = add(x,multiplication(except(td.offsetWidth,30),surplusTime));
}
//计算右上角坐标
var addNumber = add(distanceTime,duration);
var blankSpace = (except(addNumber,30)+"").split(".")[0];//前面空余格数
var surplusTime = subtraction(addNumber,multiplication(blankSpace,30));//剩余分钟数
var td = tr.children('td')[blankSpace];
var y = findPosX(td);
if(surplusTime > 0){
y = add(y,multiplication(except(td.offsetWidth,30),surplusTime));
}
dottedLineDiv.css({
width:subtraction(y,x),
top:findPosY(td),
left:x
});
}
}
/**
* 隐藏虚线框
*/
function hideDottedLine(){
if($(".dottedLine").css("display") != "none"){
$(".dottedLine").css('display', 'none');
}
}
/**
* 复制当前选中的div所有属性
* @param div 目标dom对象
* @param isAssignmentOrder 是否是已分配的订单
*/
function divCopyfunction(div,isAssignmentOrder){
isCopy = true;
isSelectDriver = false;
isLetGo = false;
var divJQ = $(div);
var divcopy = document.getElementById("divCopy");
divcopy.style.display = "inline";
divcopy.style.left = divJQ.offset().left;
divcopy.style.top = divJQ.offset().top;
divcopy.innerHTML = div.innerHTML;
divcopy.style.backgroundColor =div.style.backgroundColor;
var y = div.offsetHeight;
var x = div.offsetWidth;
divcopy.style.height = y;
divcopy.style.width = x;
var divcopyJQ = $(divcopy);
divcopyJQ.attr("distanceTime",divJQ.attr("distanceTime"));
divcopyJQ.attr("duration",divJQ.attr("duration"));
if(isAssignmentOrder){
divcopyJQ.attr("divId",divJQ.attr("divId"));
}else{
divcopyJQ.attr("divId",divJQ.attr("id"));
}
divcopyJQ.attr("dataa",divJQ.attr("dataa"));
divDistanceX = except(x,2);
divDistanceY = except(y,2);
//松开鼠标后
divcopy.onmouseup = function (event) {
if(isCopy){
isLetGo = true;
reset (divcopy,div)
if(isAssignmentOrder){
document.getElementById(divJQ.attr("divId")).style.display = "inline";
divJQ.remove();
}
setTimeout(function(){
isLetGo = false;
},100);
isCopy = false;
}
}
}
/**
* 鼠标移动copyDiv后在时间表格中的Tr上放开后触发方法
*/
$(".driverTr").mouseover(function (event) {
if(isLetGo){
hideDottedLine();
var divCopy = document.getElementById("divCopy");
var divCopyJQ = $(divCopy);
var distanceTime = Number(divCopyJQ.attr("distanceTime"));//距离起始位置时间长度
var duration = Number(divCopyJQ.attr("duration"));
//计算左上角坐标
var blankSpace = (except(distanceTime,30)+"").split(".")[0];//前面空余格数
var surplusTime = subtraction(distanceTime,multiplication(blankSpace,30));//剩余分钟数
var td = $(this).children('td')[blankSpace];
var x = findPosX(td);
if(surplusTime > 0){
x = add(x,multiplication(except(td.offsetWidth,30),surplusTime));
}
//计算右上角坐标
var addNumber = add(distanceTime,duration);
var blankSpace = (except(addNumber,30)+"").split(".")[0];//前面空余格数
var surplusTime = subtraction(addNumber,multiplication(blankSpace,30));//剩余分钟数
var td = $(this).children('td')[blankSpace];
var y = findPosX(td);
if(surplusTime > 0){
y = add(y,multiplication(except(td.offsetWidth,30),surplusTime));
}
var div = document.createElement("div");//创建DIV
div.style.width = subtraction(y,x);
div.style.height = td.offsetHeight;
div.style.left = x;
div.style.top = findPosY(td);
div.style.position = "absolute";
div.style.border = "1px solid #000000";
div.style.opacity=0.7;
div.style.backgroundColor = divCopy.style.backgroundColor;
div.setAttribute("dataa",divCopyJQ.attr("dataa"));
div.setAttribute("class","labelBody");
div.setAttribute("divId",divCopyJQ.attr("divId"));
div.setAttribute("distanceTime",divCopyJQ.attr("distanceTime"));
div.setAttribute("duration",divCopyJQ.attr("duration"));
div.innerHTML = divCopy.innerHTML;
/**
* 鼠标在订单上浮移动时触发的显示
*/
$(div).mousemove(function(event){
var div = document.getElementById("textbox");
if(div.style.display != "inline"){
div.style.display = "inline";
div.innerHTML = "<span>"+$(this).attr("dataa")+"</span>";
}
//设置左上角起点位置
div.style.left = event.clientX +10+ "px";
div.style.top = event.clientY + 10+"px";
});
/**
* 鼠标在订单上按下鼠标左键时触发的显示
*/
$(div).mousedown(function(event){
if(event.button == 0 || event.button == 1){
divCopyfunction(div,true);
this.style.backgroundColor = '#e3e3e3';
}
});
/**
* 鼠标在订单上松开鼠标离开时触发的显示
*/
$(div).mouseout(function(){
document.getElementById("textbox").style.display = "none";
hideDottedLine();
});
document.getElementById("timeAxis").appendChild(div);
document.getElementById(divCopyJQ.attr("divId")).style.display = "none";
isLetGo = false;
isCopy = false;
}
});
});
/**
* 计算元素左上角x坐标
* @param obj dom对象
* @returns {number}
*/
function findPosX(obj) {
var curleft = 0;
if (obj.offsetParent) { //返回父类元素，大多说offsetParent返回body
while (obj.offsetParent) {//遍历所有父类元素
curleft += obj.offsetLeft;//当前元素的左边距
obj = obj.offsetParent;
}
} else if (obj.x) curleft += obj.x;
return curleft;
}
/**
* 计算元素左上角y坐标
* @param obj dom对象
* @returns {number}
*/
function findPosY(obj) {
var curtop = 0;
if (obj.offsetParent) {
while (obj.offsetParent) {
curtop += obj.offsetTop;
obj = obj.offsetParent;
}
} else if (obj.y) curtop += obj.y;
return curtop;
}
/*
* 原有属性重置
* */
function reset (divcopy,div) {
divcopy.style.display = "none";
var dottedLineList = document.getElementsByClassName("dottedLine");
for(var i = 0;i < dottedLineList.length;i++){
dottedLineList[i].style.display = "none";
}
divcopy.onmousemove = undefined;
div.style.backgroundColor = divcopy.style.backgroundColor;
}
/**
* 加
**/
function add (arg1, arg2) {
if(arg1 == undefined && arg2 == undefined)return 0;
if(arg1 == undefined)arg1 = 0;
if(arg2 == undefined)arg2 = 0;
var r1, r2, m, c;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
c = Math.abs(r1 - r2);
m = Math.pow(10, Math.max(r1, r2));
if (c > 0) {
var cm = Math.pow(10, c);
if (r1 > r2) {
arg1 = Number(arg1.toString().replace(".", ""));
arg2 = Number(arg2.toString().replace(".", "")) * cm;
} else {
arg1 = Number(arg1.toString().replace(".", "")) * cm;
arg2 = Number(arg2.toString().replace(".", ""));
}
} else {
arg1 = Number(arg1.toString().replace(".", ""));
arg2 = Number(arg2.toString().replace(".", ""));
}
return (arg1 + arg2) / m;
};
/**
* 减
**/
function subtraction (arg1, arg2) {
if(arg1 == undefined && arg2 == undefined)return 0;
if(arg1 == undefined)arg1 = 0;
if(arg2 == undefined)arg2 = 0;
var r1, r2, m, n;
try {
r1 = arg1.toString().split(".")[1].length;
} catch (e) {
r1 = 0;
}
try {
r2 = arg2.toString().split(".")[1].length;
} catch (e) {
r2 = 0;
}
m = Math.pow(10, Math.max(r1, r2)); //last modify by deeka //动态控制精度长度
n = (r1 >= r2) ? r1 : r2;
return Number(((arg1 * m - arg2 * m) / m).toFixed(n));
};
/**
* 乘
**/
function multiplication (arg1, arg2) {
if(arg1 == undefined || arg2 == undefined)return 0;
var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
try {
m += s1.split(".")[1].length;
m += s2.split(".")[1].length;
} catch (e) {}
return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
};
/**
* 除法
**/
function except (arg1, arg2) {
if (arg1 == undefined || arg2 == "" || arg2 == undefined || arg2 == 0) return 0;
var t1 = 0, t2 = 0, r1, r2;
try {
t1 = arg1.toString().split(".")[1].length;
t2 = arg2.toString().split(".")[1].length;
}
catch (e) {}
with (Math) {
r1 = Number(arg1.toString().replace(".", ""));
r2 = Number(arg2.toString().replace(".", ""));
return (r1 / r2) * pow(10, t2 - t1);
}
}效果图1 初始化
上浮样式
拖动后效果
拖动移出时间表格后回退
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
