问答

div溢出但是不隐藏让他停靠。

作者:admin 2021-05-08 我要评论

有一个大的宽高固定的div,它里面有可以拖动的且大小不定的n个div,如何当里面的过大时,相对于大的来说不溢出隐藏,而是停靠在大的div的最右边和边线重合。 ###...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

有一个大的宽高固定的div,它里面有可以拖动的且大小不定的n个div,如何当里面的过大时,相对于大的来说不溢出隐藏,而是停靠在大的div的最右边和边线重合。

###

你的意思是拖拽的过程中不让子元素拖出父元素边界吗?如果是的话,可以参考下面jq代码实现,主要是设置做大可移动的宽高

//拖拽
$.fn.wmDrag = function(){
    return this.each(function(index, oDiv){
        oDiv.draggable = false
        oDiv.style.cursor = 'move'
        oDiv.onmousedown = function (e) {
            if(e.button == 2)return; //过滤右键按下事件

            var omousemove = document.onmousemove,
                    omouseup = document.onmouseup;
                            
            //鼠标按下,计算当前元素距离可视区的距离
            var disX = e.clientX,
                disY = e.clientY,
                sty = window.getComputedStyle(oDiv),
                transition = sty.transition,
                left = parseInt(sty.left),
                top = parseInt(sty.top),
                
                $parent = $(oDiv).parent(),
                //maxL = document.body.clientWidth - parseInt(sty.width),
                maxL = $parent.width() - parseInt(sty.width),
                //maxT = document.body.clientHeight - parseInt(sty.height);
                maxT = $parent.height() - parseInt(sty.height);
                
      oDiv.style.transition = 'none'
            
            oDiv.style.left = left + 'px'
            oDiv.style.top = top + 'px'
            oDiv.style.bottom = oDiv.style.right = 'auto'
            
            document.onmousemove = function (e) {
                //通过事件委托,计算移动的距离
                var l = e.clientX - disX;
                var t = e.clientY - disY;
                l = left + l
                l = l > maxL ? maxL : l < 0 ? 0 : l
                t = top + t
                t = t > maxT ? maxT : t < 0 ? 0 : t

                //移动当前元素  
                oDiv.style.left = l + 'px';
                oDiv.style.top = t + 'px';
            };
            document.onmouseup = function (e) {
                document.onmousemove = omousemove;
                document.onmouseup = omouseup;
                        
                oDiv.style.transition = transition
                
                sty = window.getComputedStyle(oDiv)
                left = parseInt(sty.left)
                top = parseInt(sty.top)
                let right = parseInt(sty.right),
                    bottom = parseInt(sty.bottom)
                if(left > right){
                    oDiv.style.right = right + 'px'
                    oDiv.style.left = 'auto'
                }
                if(top > bottom){
                    oDiv.style.bottom = bottom + 'px'
                    oDiv.style.top = 'auto'
                }
            };
        };
    })
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • div溢出但是不隐藏让他停靠。

    div溢出但是不隐藏让他停靠。

  • 思否的老哥,给愚弟看看这个问题有没有

    思否的老哥,给愚弟看看这个问题有没有

  • 上传一个文件夹,如何阻止浏览器弹出对

    上传一个文件夹,如何阻止浏览器弹出对

  • 2021-01-14:timsort是什么,如何用代

    2021-01-14:timsort是什么,如何用代

腾讯云代理商
海外云服务器