前言：
目前同学们对“jquery日期选择空间”都比较关怀，小伙伴们都需要了解一些“jquery日期选择空间”的相关内容。那么小编在网上收集了一些对于“jquery日期选择空间””的相关资讯，希望各位老铁们能喜欢，我们一起来了解一下吧！示例简介
本文介绍利用JQ实现拖动选择时间段的示例，该实例可默认显示设置的时间段、可拖动多个时间段、可伸缩时间段、可合并时间段并能导出所有时间段的详细信息，效果如下：
实现过程
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) 版权声明：
本站文章均来自互联网搜集，如有侵犯您的权益，请联系我们删除，谢谢。
标签： #jquery日期选择空间
