Sélection spéciale jquery Sélectionnable

Question

J'ai une grille de calendrier (pour le mois). Et je veux sélectionner la période pour l'événement. Comme à l'image:
Image 1.

---

Photo 2.

Comment puis-je mettre en œuvre une telle sélection (lors utilisateur de faire glisser vers le bas avec la souris sur les cellules (8 , 15, 22 sur la photo) il sélectionne toutes les semaines qui croisent les cellules (image 2)).
Il semble que le plugin JQuery UI sélectionnable n'aide pas à faire une telle sélection (il ne sélectionnerait que 3 cellules (8, 15, 22)). Peut-être qu'il peut ou il y a d'autres bibliothèques qui aident à faire cela. Peut-être qu'il peut être fixé avec des js simples ...
S'il vous plaît, conseiller quelque chose.

Answer 1

J'ai fait un où vous pouvez cliquer et faire glisser. Fondamentalement, chacun obtient un identifiant unique, puis nous mettons en évidence tous les éléments flottants à gauche entre le début et la fin.

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>