jquery - 添加拖动功能以使用 CLNDR.js 从日历中选择多个(范围)日期

Question

我正在使用 CLNDR.js lib 制作日历，它对于选择一个日期很有用，但现在我们想通过拖动日历框(日期)来选择日期范围。

正如您在图像中看到的那样，有两个 handle 可供用户拖动，还有 jquery-ui 可拖动的，但任何人都可以演示或指导我如何实现此功能，或者是否可以通过 CLNDR 实现此功能.js 本身。
任何帮助将不胜感激。

Answer 1

所以我通过使用 jquery 拖放来实现这一点。每当单击其中一个框时，我都会向其中添加某个类并添加拖动处理程序。然后使盒子可掉落并在其上放置 handle 。如果您不熟悉 jQuery 拖放，请查看 look 。我删除了一些特定于我的项目的细节。我这里分享的主要是这个拖动功能用到的核心东西，除了一些你会看到的具体功能。我希望这会有所帮助。

// highlighting the box
   $(this).addClass("bg-white");

// adding drag handlers to the date box
  $(this).append('<div id="dragable-icons" ><span class="pull-left drag-icon" id="left-icon" style="z-index: 999; left:-8px" >' +
                '<i class="fa fa-arrows " aria-hidden="true"></i>' +
                '</span>' +
                '<span class="pull-right drag-icon" id="right-icon" style="z-index: 999; right:-8px">' +
                '<i class="fa fa-arrows" aria-hidden="true" ></i>' +
                '</span></div>')

 // making the icons draggable
            $("#left-icon , #right-icon").draggable({
                containment: ".calendar-rows", scroll: true
            });

 // all the boxes with class '.active' will be droppable (i.e box with 'active' class will be selected by dragging the icons on it)
            $(".day-active").droppable({
                accept: " #right-icon, #left-icon",
                over: function (event, ui) { // when the handle is over a box
                    if($(this).hasClass("day-unavailable")){
                            $(this).removeClass("day-unavailable");
                            $(this).addClass("prev-unavailable");
                        }
                    $(this).addClass("bg-white");
                },
                // drop: when icons dragging icons are dropped on some date box
                drop: function (event, ui) {
                    // if left icon moved then update startDateBox  otherwise endDatebox (calculations)

                    if ($(event.toElement.parentElement).hasClass("pull-left")) {
                        $(ui.draggable).detach().css({top: 25,left: -7}).appendTo(this);
                        startDateBox = $(this)
                    }
                    else {
                        $(ui.draggable).detach().css({top: 25,left: 7}).appendTo(this);
                        endDateBox = $(this)
                    }

                    $('.calendar-rows').find(".bg-white").removeClass("bg-white");
                    $(startDateBox).addClass("bg-white");
                    $(endDateBox).addClass("bg-white");
                    // get all selected boxes
                    datebox = $(".bg-white")
                    len = datebox.length
                    // generateDate(), getDates(), setDateModify() : notes at end of file
                    // selecting all dates between startDate and endDate
                    startdate = generateDate(datebox[0])
                    enddate = generateDate(datebox[len - 1])
                    var dateArray = getDates(new Date(startdate), (new Date(enddate)));
                    var length = dateArray.length;
                    for (i = 1; i < length; i++) {
                        if (parseInt(dateArray[i].getMonth() + 1) > 9) {
                            month = (parseInt(dateArray[i].getMonth()) + 1);
                        }
                        else {
                            month = "0" + (parseInt(dateArray[i].getMonth()) + 1);
                        }
                        if (dateArray[i].getDate() > 9) {
                            date = dateArray[i].getDate()
                        }
                        else {
                            date = "0" + dateArray[i].getDate()
                        }
                        date = dateArray[i].getFullYear() + "-" + month + "-" + date
                        var class_name = ".calendar-day-" + date
                        if ($(class_name).hasClass("day-unavailable")) {
                                $(class_name).removeClass("day-unavailable");
                                $(class_name).addClass("prev-unavailable");
                            }  
                        $(class_name).addClass("bg-white");

                    }
                    setDateModify(startdate, enddate)
                }
            });