如何使用jQuery创建在多个div上重叠的onclick div

Question

i was created calendar as per image 1 so my question is i would like to create onclick div that was overlapping on div ie if click on 00:00 columns than creating div start 00:00 to 07:00 for 8 hours.

Image 1

So please Just Guide me about this. what is better solution

already using drag and drop for assign events to an employee. I would like to create overlapping Div as below image 2 This is onclick div created

  $("body").on("mousedown", ".Dropabletd", function () {
        Myleft = $(this).position().left;
        Mytop = $(this).position().top;
        $(this).append("<div class='dynatext label' id='divId'>J'e Divs Created</div>");
        $("#divId").css({zIndex: 999,position: "absolute", top: Mytop, left: Myleft, width: '100%', display: "block"});
    });

And that was my Dragging function.

function Dragging() {
    $("body .label").draggable({
        revert: "invalid"
    });
    $("body .Dropabletd").droppable({
        accept: ".label",
        drop: function (e, ui) {
            ui.draggable.appendTo($(this)).css({
                top: "0.4em",
                left: "0.2em",
                width: "100%",
                display: "block"

            });
            updateEvents($(this).find('span:last-child').attr("id"), $(this).attr("id"));
        }
    });
}

Answer 1

No buddy Answer Me Thanks For that because i find it My self and learn it. Any changes, suggestion Most welcome Respected Sir/ma'am

$("body").on("dblclick", ".Dropablesub_td", function () {
            var hidid = $(this).attr("id");
            var Myleft = $(this).position().left;
            var Mytop = $(this).position().top;
            var id = $(this).parent().nextAll().eq($(this).parent().index() + 8).attr("id");
            if ($(this).parent().index() > 16) {
                var widths = "100%";
            } else {
                var widths = $(this).parent().width() * 8;
            }
            var heights = $(this).height();
            $(this).html("<span id='" + hidid.replace(":", "_") + "'  class='divId label label-success unselectable' >ABCDEFGHIJKLMNOPQRSTUVWXYZ<span>");
            $(this).children().css({zIndex: 999, position: "absolute", top: Mytop, left: Myleft, width: widths, height: heights, display: "block", border: "#808080 solid 2px", color: "black", background: "#00CEB4"});
            $(".divId").resizable({
                handles: 'w'
            });
            Dragging2();
        });