特别选择jquery可选

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>