特別選擇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>