示例简介

本文介绍利用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)

JQ实现拖动选择时间段（jquery拖动div）

示例简介

实现过程

相关推荐

取消回复欢迎你发表评论:

Google 黑客常用搜索语句一览原力计划

npx简介（npxvip是哪国的）

在 Android 模拟器上运行 ARM 应用（android模拟器原理）

GB28181,B接口协议之SIPRTSPRTPRTMP协议从入门到精通

手机实时提取SIM卡打电话的信令和声音-辅助外设与商用通话方案

安装使用Hoppscotch构建API请求访问与测试

轻松转换!AppleNumbers到Excel的快捷教程

Python自动化办公——后台截图（python 自动截图）

电脑端腾讯文档如何导出excel

网络流媒体经典开源软件宝典webRTC, FFMpeg, SIP_流媒体开发教程

JQ实现拖动选择时间段（jquery拖动div）

示例简介

实现过程

相关推荐

取消回复欢迎 你 发表评论:

Google 黑客常用搜索语句一览 原力计划

npx简介（npxvip是哪国的）

在 Android 模拟器上运行 ARM 应用（android模拟器原理）

GB28181,B接口协议之SIPRTSPRTPRTMP协议从入门到精通

手机实时提取SIM卡打电话的信令和声音-辅助外设与商用通话方案

安装使用Hoppscotch构建API请求访问与测试

轻松转换!AppleNumbers到Excel的快捷教程

Python自动化办公——后台截图（python 自动截图）

电脑端腾讯文档如何导出excel

网络流媒体经典开源软件宝典webRTC, FFMpeg, SIP_流媒体开发教程

取消回复欢迎你发表评论:

Google 黑客常用搜索语句一览原力计划