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

时间:2017-06-17 09:49:02

标签: javascript jquery html css css3

我按照图像1创建了日历所以我的问题是我想创建在div上重叠的onclick div,即如果单击00:00列而不是创建div开始00:00到07:00 8小时。

图片1 enter image description here

所以请指导我这件事。什么是更好的解决方案

已经使用拖放功能将事件分配给员工。 我想创建重叠的Div,如下图2所示 enter image description here  这是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"});
    });

这就是我的拖动功能。

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"));
        }
    });
}

1 个答案:

答案 0 :(得分:0)

没有好友回答我,谢谢你,因为我找到了我自己并学习它。 任何变化,建议最受欢迎尊敬先生/我是

$("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();
        });