div跟隨滑鼠移動+上浮定位+移動放置 新增與刪除
阿新 • • 發佈：2019-01-07
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 初始化
上浮樣式
拖動後效果
拖動移出時間表格後回退
