JQ实现拖动选择时间段

﹏ヽ暗。殇╰゛Y 2022-12-16 06:20 153阅读 0赞

### 前言概述 ###

本文介绍利用JQ实现拖动选择时间段的示例，该实例可默认显示设置的时间段、可拖动多个时间段、可伸缩时间段、可合并时间段并能导出所有时间段的详细信息，效果如下：

![20201019105648931.gif][]

### 实现过程 ###

1. 先实现页面效果，文件\*.html和\*.css代码如下：

Tips:css代码联合效果比较好理解。

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8" />
      <title>拖动选择时间段</title>
      <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
    
    <body>
      <div class="kaoqing" id="demo1"></div>
      <button id="getdata">获得数据</button>
      <div id="answer"></div>
      <script src="js/jquery-1.9.1.min.js"></script>
      <script src="js/drag.js"></script>
      <script>
      $(function() {
        // 开始时间和结束时间的日期应该是同一天，不支持跨天,
        // 日期格式要标准，yyyy-MM-dd hh:mm:ss
        // 已选择的时间段
        var data3 = [{
          startime: '2020-10-19 01:30:00',
          endtime: '2020-10-19 02:00:00'
        }, {
          startime: '2020-10-19 16:30:00',
          endtime: '2020-10-19 20:30:00'
        }];
        // data3 = [];
        var juicy = $("#demo1").initJuicy({
          height: 650,
          mondayDate: '2020-10-19',
          timedata: data3,
          status: true, //false表示不能编辑，true可以编辑
        });
        $("#getdata").click(function() {
          var backdata = juicy.getdata();
          $("#answer").html(JSON.stringify(backdata))
        })
      })
      </script>
    </body>
    
    </html>

/*拖动时间段*/
    .bar {
      background-color: #fff;
      border: 1px solid #555;
      position: relative;
      height: 601px;
      width: 770px;
      float: right;
    }
    
    /*刻度*/
    .day {
      position: relative;
      height: 600px;
      box-sizing: border-box;
      width: 20px;
      float: left;
    }
    
    .day .hour {
      position: absolute;
      border-top: 1px solid red;
      width: 20px;
    }
    
    .day .halfhour {
      position: absolute;
      border-top: 1px solid #555;
      height: 7px;
      width: 20px;
      top: 12px;
    }
    
    .day .hour:after {
      position: absolute;
      top: 0;
      font: 11px/1 sans-serif;
    }
    
    .day .hour:nth-of-type(1):after {
      content: "0";
    }
    
    .day .hour:nth-of-type(2):after {
      content: "1";
    }
    
    .day .hour:nth-of-type(3):after {
      content: "2";
    }
    
    .day .hour:nth-of-type(4):after {
      content: "3";
    }
    
    .day .hour:nth-of-type(5):after {
      content: "4";
    }
    
    .day .hour:nth-of-type(6):after {
      content: "5";
    }
    
    .day .hour:nth-of-type(7):after {
      content: "6";
    }
    
    .day .hour:nth-of-type(8):after {
      content: "7";
    }
    
    .day .hour:nth-of-type(9):after {
      content: "8";
    }
    
    .day .hour:nth-of-type(10):after {
      content: "9";
    }
    
    .day .hour:nth-of-type(11):after {
      content: "10";
    }
    
    .day .hour:nth-of-type(12):after {
      content: "11";
    }
    
    .day .hour:nth-of-type(13):after {
      content: "12";
    }
    
    .day .hour:nth-of-type(14):after {
      content: "13";
    }
    
    .day .hour:nth-of-type(15):after {
      content: "14";
    }
    
    .day .hour:nth-of-type(16):after {
      content: "15";
    }
    
    .day .hour:nth-of-type(17):after {
      content: "16";
    }
    
    .day .hour:nth-of-type(18):after {
      content: "17";
    }
    
    .day .hour:nth-of-type(19):after {
      content: "18";
    }
    
    .day .hour:nth-of-type(20):after {
      content: "19";
    }
    
    .day .hour:nth-of-type(21):after {
      content: "20";
    }
    
    .day .hour:nth-of-type(22):after {
      content: "21";
    }
    
    .day .hour:nth-of-type(23):after {
      content: "22";
    }
    
    .day .hour:nth-of-type(24):after {
      content: "23";
    }
    
    .day .hour:nth-of-type(25):after {
      content: "24";
    }
    
    .day .hour:after {
      text-indent: -0.5em;
    }
    
    .weekday {
      position: relative;
      padding-right: 10px;
      height: 650px;
      width: 800px;
    }
    
    .bar div {
      display: inline-block;
    }
    
    .item {
      position: absolute;
      top: 0;
      height: 100%;
      background-color: blue;
      width: 100%;
    }
    
    .bdown {
      width: 100%;
      height: 10px;
      background: transparent;
      position: absolute;
      bottom: -5px;
      left: 0;
      z-index: 1;
    }
    
    .bup {
      width: 100%;
      height: 10px;
      background: transparent;
      position: absolute;
      top: -5px;
      left: 0;
      z-index: 1;
    }

2. 接下来实现交互逻辑，文件\*.js代码实现如下：

Tips：函数作用已有备注，可自行调试理解。

/**
     * 按格子移动，数据格式为日期
     */
    (function($) {
    	'use strict';
    	$.fn.initJuicy = function(data) {
    		return new MyinitJuicy(data, this);
    	};
    	var perheight = 0;
    	var MyinitJuicy = function(data, that) {
    		var me = this;
    		me.init(data, that);
    		me.offsettop = $(that).offset().top;
    	};
    
    	// 返回选择的日期
    	MyinitJuicy.prototype.getdata = function() {
    		var backdata = [];
    		var monday = $(".kaoqing").data("monday");
    		$.each($(".weekday"), function(i, obj) {
    			var thisday = getNextDate(monday, i);
    			$.each($(obj).find(".item"), function(j, obj1) {
    				var x = parseFloat($(obj1).css("top")) / perheight;
    				var y = parseFloat($(obj1).css("height")) / perheight + x;
    				var startime = Math.round(x) % 2 == 0 ? (thisday + " " +  ("0"+Math.round(x) / 2).slice(-2) + ":00:00") : (thisday + " " + ("0"+ parseInt(Math.round(x) / 2)).slice(-2) + ":30:00");
    				var endtime = Math.round(y) % 2 == 0 ? (thisday + " " + ("0"+Math.round(y) / 2).slice(-2) + ":00:00") : (thisday + " " + ("0"+parseInt(Math.round(y) / 2)).slice(-2) + ":30:00");
    				backdata.push({
    					startime: startime,
    					endtime: endtime
    				});
    			});
    
    		})
    		return backdata;
    	}
    	// 初始化
    	MyinitJuicy.prototype.init = function(data, that) {
    		var me = this;
    		me.current = 0; //新增编号
    		me.cando = true; //当前位置是否允许新增
    		me.nowmove = -1; //当前拖动的序号
    		me.newcreate = true;
    		me.opts = $.extend(true, {}, { //用于设弹窗默认值
    			height: 900,
    			mondayDate: '',
    			timedata: [], //[{startime:,endtime:},]
    			status: true,
    			data1: [{
    				"type": "周一",
    				"timeSlot": []
    			}, {
    				"type": "周二",
    				"timeSlot": []
    			}, {
    				"type": "周三",
    				"timeSlot": []
    			}, {
    				"type": "周四",
    				"timeSlot": []
    			}, {
    				"type": "周五",
    				"timeSlot": []
    			}, {
    				"type": "周六",
    				"timeSlot": []
    			}, {
    				"type": "周日",
    				"timeSlot": []
    			}]
    		}, data);
    		me.mousedown = false;
    		//初始化
    		var str = '';
    		var boxheight = me.opts.height;
    		var navheight = me.opts.height - 50;
    		me.perheight = perheight = navheight / 48;
    		$(that).css("height", boxheight + "px");
    		$(that).attr("data-monday", me.opts.mondayDate);
    		var data3 = me.opts.timedata;
    		var timedata = me.opts.data1;
    	
    		for(var i = 0; i < 7; i++) {
    			timedata[i]["type"] += getNextDay(me.opts.mondayDate, i);
    		}
    		
    		$.each(data3, function(i, obj) {
    			var day = new Date(obj.startime.replace(/-/g,"/")).getDay() - 1;
    			if(day == -1) day = 6;
    			timedata[day]["timeSlot"].push([getMytime(obj.startime), getMytime(obj.endtime)]);
    		});
    
    		for(var i = 0; i < 1; i++) {
    			str += '<div class="weekday">' +
    				'<div>' +
    				'<div class="day">';
    			for(var j = 0; j < 24; j++) {
    				str += '<div class="hour" style="top:'+me.perheight * 2 * j+'px;"><div class="halfhour"></div></div>';
    			}
    			str += '<div class="hour" style="top:'+me.perheight * 2 * 24+'px;"></div></div><div class="bar">';
    			if(timedata.length == 0) {
    				str += '</div></div></div>';
    			} else {
    				for(var t = 0; t < timedata[i].timeSlot.length; t++) {
    					var top = navheight * timedata[i].timeSlot[t][0] / 24;
    					var height = navheight * (timedata[i].timeSlot[t][1] - timedata[i].timeSlot[t][0]) / 24;
    					str += '<div class="item item' + me.current + '" style="top:' + top + 'px;height:' + height + 'px" data-num="' + me.current + '">' +
    						'<div class="bup"></div><div class="bdown"></div></div>';
    					me.current++;
    				}
    				str += '</div></div></div>';
    			}
    		}
    
    		var $str = $(str);
    		$(that).append($str);
    		//点在蓝条条上就禁止它新建了
    		if(me.opts.status) {
    			$(".bup").css("cursor", "n-resize");
    			$(".bdown").css("cursor", "s-resize");
    			$str.find(".item").on('mousedown', function(e) {
    				me.cando = false;
    				return false;
    			})
    			$str.find(".bar").on('mousedown', function(e) {
    				if(me.cando) {
    					me.mousedown = true;
    					me.newcreate = true;
    					fnstart(e, me, this);
    				}
    				return false; //防止事件冒泡
    			});
    			$("body").on('mouseup', function(e) {
    				me.cando = true;
    				if(me.mousedown) {
    					me.mousedown = false;
    					fnend(me);
    					me.nowmove = -1;
    				}
    				return false; //防止事件冒泡
    			});
    
    			$str.find(".bdown").on('mousedown', function(e) {
    				me.mousedown = true;
    				me.newcreate = false;
    				me._startY = e.pageY;
    				me.direction='down';
    				me.height = parseFloat($(this).parent().css("height")); //会实时变化
    				me.top = parseFloat($(this).parent().css("top")); //会实时变化
    				me.startheight = parseFloat($(this).parent().css("height")); //是个常数
    				me.starttop = parseFloat($(this).parent().css("top")); //是个常数
    				me.nowmove = parseFloat($(this).parent().data("num"));
    				return false;
    			})
    			$str.find(".bup").on('mousedown', function(e) {
    				me.mousedown=true;
    				me.newcreate = false;
    				me._startY = e.pageY;
    				me.direction='up';
    				me.height = parseFloat($(this).parent().css("height")); //会实时变化
    				me.top = parseFloat($(this).parent().css("top")); //会实时变化
    				me.startheight = parseFloat($(this).parent().css("height")); //是个常数
    				me.starttop = parseFloat($(this).parent().css("top")); //是个常数
    				me.nowmove = parseFloat($(this).parent().data("num"));
    				return false; 
    			})
    			//注意：move事件一定要绑在body上，当鼠标移动过快可能移除那个div区域
    			$("body").on('mousemove', function(e) {
    				if(me.mousedown && me.newcreate) {
    					fnmove(e, me);
    				} else if(me.mousedown && !me.newcreate) {
    					if(me.direction&&me.direction=='up'){
    						fnmoveup(e, me);
    					}else if(me.direction&&me.direction=='down'){
    						fnmovedown(e, me);
    					}
    				} else {
    					e.preventDefault()
    				}
    
    			});
    		} else {
    			$(".bdown,.bup").css("cursor", "default");
    		}
    
    	};
    	function fnmoveup(e, me) {
    		me._curX = e.pageX;
    		me._curY = e.pageY;
    		me._moveY = me._startY - me._curY;
    		var item = ".item" + me.nowmove;
    		var top= me.starttop-me._moveY;
    		var height = me.startheight + me._moveY;
    		//左边的向左拉，不超过左边边界
    		if(me._moveY > 0 && me._moveY < me.starttop) {
    			$(item).css({
    				"height": height + 'px',
    				"top": top + 'px'
    			})
    			me.height = height;
    			me.top = top;
    		} else if(me._moveY > 0 && me._moveY >= me.starttop) { //左边的向左拉，超过左边边界
    			$(item).css({
    				"height": (me.starttop+me.startheight) + 'px',
    				"top": 0
    			})
    			me.height = me.starttop+me.startheight;
    			me.top = 0;
    		} else if(me._moveY < 0 && -me._moveY <= me.startheight) { //左边的向右拉,不能超过当前右边的0.5小时
    			$(item).css({
    				"height": height + 'px',
    				"top": top + 'px'
    			})
    			me.height = height;
    			me.top = top;
    		} else if(me._moveY < 0 && -me._moveY > me.startheight) { //左边的向右拉,超过最右边
    			$(item).css({
    				"height": 0,
    				"top": (me.startheight + me.starttop)+ 'px'
    			})
    			me.height = 0;
    			me.top = me.startheight + me.starttop;
    		}
    	}
    	function fnmovedown(e, me) {
    		me._curX = e.pageX;
    		me._curY = e.pageY;
    		me._moveY = me._curY - me._startY;
    		var item = ".item" + me.nowmove;
    		var top = me.starttop;
    		var height = me.startheight + me._moveY;
    		//右边的向右拉，不超过右边边界
    		if(me._moveY > 0 && me._moveY < me.perheight * 48 - me.starttop - me.startheight) {
    			$(item).css({
    				"height": height + 'px',
    				"top": top + 'px'
    			})
    			me.height = height;
    		} else if(me._moveY > 0 && me._moveY >= me.perheight * 48 - me.starttop - me.startheight) { //右边的向右拉，超过右边边界
    			$(item).css({
    				"height": (me.perheight * 48 - top) + 'px',
    				"top": top + 'px'
    			})
    			me.height = me.perheight * 48 - top;
    		} else if(me._moveY < 0 && -me._moveY <= me.startheight) { //右边的向左拉,不能超过当前左边的0.5小时
    			$(item).css({
    				"height": height + 'px',
    				"top": top + 'px'
    			})
    			me.height = height;
    		} else if(me._moveY < 0 && -me._moveY > me.startheight) { //右边的向左拉,超过最左边
    			$(item).css({
    				"height": 0,
    				"top": top + 'px'
    			})
    			me.height = 0;
    		}
    	}
    	
    	function fnstart(e, me, that) {
    		me._startY = e.pageY;
    		var top = me._startY - me.offsettop;
    		me.top = nearest(top);
    		me.starttop = nearest(top);
    		me.nowmove = me.current;
    		var str = '<div class="item item' + me.current + '" style="top:' + me.top + 'px;height:1px"  data-num="' + me.current + '">' +
    			'<div class="bup"></div><div class="bdown"></div></div>';
    		me.current++;
    		var item = ".item" + (me.current - 1);
    		$(that).append($(str));
    		if(me.opts.status) {
    			$(".bup").css("cursor", "n-resize");
    			$(".bdown").css("cursor", "s-resize");
    			$(item).on('mousedown', function(e) {
    				me.cando = false;
    				return false;
    			})
    
    			$(item).find(".bdown").on('mousedown', function(e) {
    				me.mousedown = true;
    				me.newcreate = false;
    				me._startY = e.pageY;
    				me.direction='down';
    				me.height = parseFloat($(this).parent().css("height")); //会实时变化
    				me.top = parseFloat($(this).parent().css("top")); //会实时变化
    				me.startheight = parseFloat($(this).parent().css("height")); //是个常数
    				me.starttop = parseFloat($(this).parent().css("top")); //是个常数
    				me.nowmove = parseFloat($(this).parent().data("num"));
    				return false;
    			})
    			$(item).find(".bup").on('mousedown', function(e) {
    				me.mousedown=true;
    				me.newcreate = false;
    				me._startY = e.pageY;
    				me.direction='up';
    				me.height = parseFloat($(this).parent().css("height")); //会实时变化
    				me.top = parseFloat($(this).parent().css("top")); //会实时变化
    				me.startheight = parseFloat($(this).parent().css("height")); //是个常数
    				me.starttop = parseFloat($(this).parent().css("top")); //是个常数
    				me.nowmove = parseFloat($(this).parent().data("num"));
    				return false; 
    			})
    		} else {
    			$(".bup,.bdown").css("cursor", "default");
    		}
    
    	}
    
    	function fnmove(e, me) {
    		me._curX = e.pageX;
    		me._curY = e.pageY;
    		me._moveY = me._curY - me._startY;
    		var item = ".item" + (me.current - 1);
    		if(me._moveY > 0 && me._moveY < me.perheight * 48 - me.starttop) {
    			me.height = me._moveY;
    			$(item).css("height", me._moveY + 'px');
    //			$(item).css("height", me._moveY + 'px')
    		} else if(me._moveY > 0 && me._moveY >= me.perheight * 48 - me.starttop) {
    			me.height = me.perheight * 48 - me.starttop;
    			$(item).css("height", (me.perheight * 48 - me.starttop) + 'px')
    		} else {
    			me.height = 0;
    			$(item).css("height", 0)
    		}
    	}
    
    	function fnend(me, i) {
    		var height = me.height;
    		var top = me.top;
    		var item = ".item" + me.nowmove;
    		if(height == 0) {
    			$(item).remove();
    		} else {
    			$(item).css("height", nearest(height) + "px");
    			$(item).css("top", nearest(top) + "px");
    			var result = xiaoxiannvbianshen(item);
    			var items = $(item).parent().find(".item");
    			if(result.length < items.length) {
    				$.each(items, function(i, obj) {
    					if(i < result.length) {
    						$(obj).css({
    							"top": result[i][0] + 'px',
    							"height": result[i][1] + 'px'
    						})
    					} else {
    						$(obj).remove();
    					}
    				});
    			}
    		}
    		//松手后才能修改值
    	}
    
    	// 计算贴近的位置
    	function nearest(top) {
    		var yu = top % perheight;
    		if(yu < perheight / 2) {
    			return top - yu;
    		} else {
    			return top + (perheight - yu);
    		}
    	}
    
    	function getMytime(date) {
    		if(date.split(" ")[1] == "24:00:00") {
    			return 24;
    		} else {
    			var time = new Date(date.replace(/-/g,"/"));
    			if(time.getMinutes() > 10) {
    				return time.getHours() + 0.5;
    			} else {
    				return time.getHours();
    			}
    		}
    
    	}
    
    	// 返回月日
    	function getNextDay(d, i) {
    		var monday = new Date(d.replace(/-/g,"/"));
    		monday = monday.getTime() + 1000 * 60 * 60 * 24 * i;
    		monday = new Date(monday);
    		return (monday.getMonth() + 1) + "/" + monday.getDate();
    	}
    
    	// 返回年月日
    	function getNextDate(d, i) {
    		var monday = new Date(d.replace(/-/g,"/"));
    		monday = monday.getTime() + 1000 * 60 * 60 * 24 * i;
    		monday = new Date(monday);
    		return monday.getFullYear() + "-" + ("0"+(monday.getMonth() + 1)).slice(-2) + "-" + ("0"+monday.getDate()).slice(-2);
    	}
    
    	function xiaoxiannvbianshen(item) {
    		var array = [];
    		var arrayresult = [];
    		var $item = $(item).parent().find(".item");
    		$.each($item, function(i, obj) {
    			var top = parseFloat($(obj).css("top"));
    			var height = parseFloat($(obj).css("height"));
    			array.push([top, top + height]);
    		});
    		var sortarray = bubbleSort(array);
    		//var sortarray = array.sort();
    		var temp = sortarray[0];
    		for(var i = 0; i < sortarray.length; i++) {
    			if(!sortarray[i + 1]) {
    				arrayresult.push(temp);
    				break
    			}
    			if(temp[1] < sortarray[i + 1][0]) {
    				arrayresult.push(temp);
    				temp = sortarray[i + 1];
    			} else {
    				if(temp[1] <= sortarray[i + 1][1]) {
    					temp = [temp[0], sortarray[i + 1][1]];
    				} else {
    					temp = [temp[0], temp[1]];
    				}
    			}
    		}
    		var huanyuan = [];
    		for(var j = 0; j < arrayresult.length; j++) {
    			huanyuan.push([arrayresult[j][0], arrayresult[j][1] - arrayresult[j][0]]);
    		}
    		return huanyuan;
    	}
    
    	function bubbleSort(array) {
    		for(var unfix = array.length - 1; unfix > 0; unfix--) {
    			for(var i = 0; i < unfix; i++) {
    				if(array[i][0] > array[i + 1][0]) {
    					var temp = array[i];
    					array.splice(i, 1, array[i + 1]);
    					array.splice(i + 1, 1, temp);
    				}
    			}
    		}
    		return array;
    	}
    })(window.Zepto || window.jQuery)

![20201019110549260.jpg][]

[20201019105648931.gif]: /images/20221123/273894655b7b40318fc4b107f9245626.png
[20201019110549260.jpg]: /images/20221123/367e1f18f9db4342bece2127420e54bb.png