特殊选择jquery Selectable

Question

我有一个日历网格（用于月份）。我想为事件选择时间段。和图片一样：
图片1。

---

图 2。

如何实现这样的选择（当用户用鼠标向下拖动单元格（图片上的 8、15、22）时，他选择了与单元格相交的所有周（图 2）） .
看来，JQuery UI 可选插件无助于做出这样的选择（它只会选择 3 个单元格（8、15、22））。也许它可以或者有其他库可以帮助做到这一点。也许它可以用普通的 js 来修复...
请给点建议。

Answer 1

我做了一个你可以点击和拖动的地方。基本上每个都有一个唯一的 id，然后我们突出显示开始和结束之间的所有左侧浮动元素。

mouseDown = null;
from = null;
$("div").each(function (i) {
  $(this).attr("data-id",i);
});
$("div").on("mousedown", function () {
  mouseDown = $(this).attr("data-id");
}).on("mousemove", function () {
  if (mouseDown) {
    mouseUp = $(this).attr("data-id");
    $("div").each(function (i) {
      if (i >= mouseDown && i <= mouseUp) {
        $(this).css("background","red");
      }
    });
  }
}).on("mouseup", function (){
  mouseDown = null;
});

div {
  width:50px;
  height:50px;
  float:left;
  border:1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>