js实现带拖拽、贴边的checkBox

最新推荐文章于 2023-11-09 17:51:25 发布

shengjunlintianxia

最新推荐文章于 2023-11-09 17:51:25 发布

阅读量405

点赞数

本文链接：https://blog.csdn.net/shengjunlintianxia/article/details/104635976

版权

js 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

html5

14 篇文章 0 订阅

订阅专栏

jquery

4 篇文章 0 订阅

订阅专栏

效果：

代码：

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
	<style>
		body{overflow: hidden;}
#box{
    height: max-content;
    z-index: 10;
    position: absolute;
    /*left: 0;*/
    /*bottom: 0;*/
    right: 0;
    top: 40%;
    width: max-content;
}

.CheckBoxGroup{
    margin: 0;
    padding: 0;
    background: #fff;
    box-shadow: 0px 2px 4px 3px rgba(0, 0, 0, 0.31);
    float: left;
    border-radius: 30px;
    overflow: hidden;

    width: 50px;
    transition:width 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s;
    -webkit-transition:width 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55) 0s; /* Safari */
}
.CheckBoxGroup:hover{
    width: 200px;
}
.CheckBoxGroup li{
    font-size: 16px;
    padding: 10px;
    margin: 0;
    list-style: none;
    line-height: 17px;
    text-align: left;
    white-space: nowrap;
    outline: 0;
    float: left;
    color: black;
    /* height: 60px; */
    width: 180px;
    height: 32px;
    user-select: none;
}
.CheckBoxGroup li label{
    width: 100%;
    display: block;
}
.CheckBoxGroup li label img{
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  width: 30px;
}
.CheckBoxGroup li label input.button.chk {
    cursor: auto;
    width: 30px;
    padding-top: 12px;
    padding-left: 10px;
    font-size: 26px;
}

.CheckBoxGroup li label input.button {
    line-height: 0;
    margin: 0 auto;
    padding: 0;
    width: 15px;
    height: 17px;
    display: none;
    vertical-align: top;
    border: 0px solid;
    cursor: pointer;
    outline: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-attachment: scroll;
}
.CheckBoxGroup li label span{
    vertical-align: middle;
    display: inline-block;
    margin-bottom: 20px;
    margin-left: 10px;
}


/*滚动条start*/
::-webkit-scrollbar {
    height: 6px;
    width: 6px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb {
    height: 100px;
    border-radius: 8px;
    border: 1px solid aliceblue;
}
::-webkit-scrollbar-button {
    border-radius: 3px;
    height: 10px;
    width: 10px;
    background: radial-gradient(#82ffff, #000000a6);
}
/*滚动条end*/


.info-box div{
    border-bottom: 1px solid;
    padding-bottom: 15px;
}
.info-box p:hover{
    background: rgb(199, 255, 182);
}

	</style>
</head>
<body>
        <div id="box">
            <ul class="CheckBoxGroup" id="dragIt">

            </ul>
        </div>
<script>
	$(document).ready(function(){
        initSelectBox();
        dragPanelMove("#dragIt","#box");
    });
  
  
    //定义选择树的勾选回调函数
    var treeContentArray = new Array();
	    //treeContentArray["1"] = {"id" : "1", "name" : "人口", "fname" : "", "boxIcon" : "../../resource/desktop/images/mapIcon/popu_0.png", "icon" : "../../resource/desktop/images/mapIcon/popu_1.png"};
    treeContentArray["2"] = {"id" : "2", "name" : "学校", "fname" : "", "boxIcon" : "../../resource/desktop/images/mapIcon/school_0.png", "mapIcon" : "../../resource/desktop/images/mapIcon/school_1.png"};
    treeContentArray["3"] = {"id" : "3", "name" : "幼儿园", "fname" : "", "boxIcon" : "../../resource/desktop/images/mapIcon/kindergarten_0.png", "mapIcon" : "../../resource/desktop/images/mapIcon/kindergarten_1.png"};
    treeContentArray["4"] = {"id" : "4", "name" : "医疗机构", "fname" : "getHospitalOrgList", "boxIcon" : "../../resource/desktop/images/mapIcon/hospitalOrg_0.png", "mapIcon" : "../../resource/desktop/images/mapIcon/hospitalOrg_1.png"};
    treeContentArray["5"] = {"id" : "5","name" : "职业健康监管企业", "fname" : "getRegulatedOccupationOrgList", "boxIcon" : "../../resource/desktop/images/mapIcon/regulatedOccupationOrg_0.png", "mapIcon" : "../../resource/desktop/images/mapIcon/regulatedOccupationOrg_1.png"};
   // treeContentArray["6"] = {"id" : "6", "name" : "家庭病床", "fname" : "", "boxIcon" : "../../resource/desktop/images/mapIcon/familyBed_0.png", "mapIcon" : "../../resource/desktop/images/mapIcon/familyBed_1.png"};
    treeContentArray["7"] = {"id" : "7", "name" : "健康小屋", "fname" : "getHealthCabinList", "boxIcon" : "../../resource/desktop/images/mapIcon/healthCabin_0.png", "mapIcon" : "../../resource/desktop/images/mapIcon/healthCabin_1.png"};

	    //初始化生成覆盖物勾选菜单
    function initSelectBox() {
        if (null == treeContentArray) {
            return;
        }
        var htmlContent = "";
        for (index in treeContentArray) {
            var treeContent = treeContentArray[index];
            htmlContent += '<li>'
                        + '<label>'
                        + '<img src="' + treeContent.boxIcon + '">'
                        + '<input type="checkbox" class="button checkbox_true_full" onclick="javascript:overLayToggle(this,\'' + treeContent.id + '\');"/>'
                        + '<span>' + treeContent.name
                        + '</span>'
                        + '</label>'
                        + '</li>';
        }
        var dragItUl = document.getElementById("dragIt");
        dragItUl.innerHTML = htmlContent;
        $("#dragIt input").on("click",function () {
            if ($(this).hasClass("chk")) {
                $(this).removeClass("chk")
                $(this).parents("li").css("background","rgb(255, 255, 255)")
            }else{
                $(this).addClass("chk")
                $(this).parents("li").css("background","rgb(199, 255, 182)")
            }
        })
        //触发click事件
        $("#dragIt input").each(function(idx) {
            $(this).trigger('click');
        });
    }
    //拖拽
    function dragPanelMove(downDiv,moveDiv){
        $(downDiv).mousedown(function (e) {
            var isMove = true;
            var div_x = e.pageX - $(moveDiv).offset().left;
            var div_y = e.pageY - $(moveDiv).offset().top;
            var obj = $(moveDiv);
            $(document).mousemove(function (e) {
                if (isMove) {
                    obj.css({"left":e.pageX - div_x, "top":e.pageY - div_y});
                }
            }).mouseup(
                function (e) {
                    if (e.pageX <= 0) {
                        obj.css({"left":0, "top":e.pageY - div_y})
                    }else if (e.pageX >= $('body').outerWidth() - 1) {
                        obj.css({"right":0, "top":e.pageY - div_y, "left":"unset"});
                    }else if (e.pageY <=0){
                        obj.css({"left":e.pageX - div_x, "top":0})
                    } else if (e.pageY >= $('body').outerHeight() - 1){
                        obj.css({"left":e.pageX - div_x, "bottom":0, "top":"unset"})
                    }
                    isMove = false;
                });
        });
    }
</script>

</body>
</html>