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

Question

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

Answer 1

你的意思是拖拽的过程中不让子元素拖出父元素边界吗？如果是的话，可以参考下面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'
                }
            };
        };
    })
}