js鼠标事件实现便笺墙

最新推荐文章于 2021-06-20 06:29:54 发布

sweetllh

最新推荐文章于 2021-06-20 06:29:54 发布

阅读量441

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/sweetllh/article/details/71375219

版权

javascript 专栏收录该内容

73 篇文章 3 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>便笺墙</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }

        body{
            width: 100%;
            height: 100%;
            padding: 30px;
            overflow: hidden;
        }

        #text{
            display: block;
            width: 250px;
            height: 25px;
        }

        #content{
            position: relative;
            width: 1100px;
            height: 600px;
            border: 1px solid lightcoral;
            margin-top: 10px;
            overflow: hidden;
        }

        #content li{
            float: left;
            width: 100px;
            height: 100px;
            line-height: 20px;
            word-break: break-all;
            overflow: hidden;
            box-shadow: 5px 5px 2px lightpink;
            border-top-left-radius: 30px;
            margin: 20px;
            padding: 10px;
            background: lightsalmon;
            list-style: none;
            font-size: 14px;
            font-family: "微软雅黑";
            position: absolute;
            left: 0;
            top: 0;
        }

        #content li p{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #F00;
            position: absolute;
            top: 5px;
            left: 45px;
            display: none;
        }

    </style>
</head>
<body>
    <input id="text"></input>
    <ul id="content"></ul>
</body>
<script type="text/javascript">
    (function(){
        var oUl = document.getElementById('content');
        var zIndex = 10;

        function appendLi(){
            var oLi=document.createElement('li');
            var oImg=document.createElement('p');
            var oText = document.getElementById('text');
            var sText = oText.value;
            oLi.innerHTML = sText;
            if(oUl.children.length>0){
                var oFirstNode=oUl.children[0];
                oUl.insertBefore(oLi,oFirstNode);
            }else{
                oUl.appendChild(oLi);
            };
            oLi.appendChild(oImg);
        };



        //从文本框输入内容，通过ctrl+回车提交内容
        //div可以通过鼠标进行移动,移动后的div有钉子钉住）
        document.onkeydown = function(e){
            var e = e || event;
            if(e.keyCode==13 && e.ctrlKey){
                appendLi();
                var aLis = document.querySelectorAll('li');
                for(var i=0; i<aLis.length; i++){
                    (function(j){
                        aLis[j].onmousedown = function(e){
                            var e = e || event;
                            aLis[j].style.zIndex = ++zIndex;  //点击到的li显示在最前面
                            var disX = e.clientX - aLis[j].offsetLeft;
                            var disY = e.clientY - aLis[j].offsetTop;

                            document.onmousemove = function(e){
                                var e = e || event;
                                var left = e.clientX - disX;
                                var top = e.clientY - disY; 
                                if(left<0){
                                    left = 0;
                                } else if(left > oUl.offsetWidth - aLis[j].offsetWidth){
                                    left = oUl.offsetWidth - aLis[j].offsetWidth;
                                }
                                if(top<0){
                                    top = 0;
                                } else if(top > oUl.offsetHeight - aLis[j].offsetHeight){
                                    top = oUl.offsetHeight - aLis[j].offsetHeight;
                                }
                                aLis[j].style.left = left + 'px';
                                aLis[j].style.top =  top + 'px';
                                aLis[j].getElementsByTagName('P')[0].style.display = 'none';
                                return false;
                            };

                            document.onmouseup = function(){
                                document.onmousemove=null;
                                document.onmousedown=null;
                                aLis[j].getElementsByTagName('P')[0].style.display = 'block';
                            }
                            if(e.preventDefault){
                                e.preventDefault();
                            };
                        };

                })(i);
            }
        }
    }   

    })()
</script>
</html>

sweetllh

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
js鼠标事件实现便笺墙

<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title>便笺墙</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{
复制链接

扫一扫

专栏目录