JavaScript中,讓一個div在固定的父div中任意拖動

本文轉載自查看原文 2017-08-17 13:58 3515

1、css代碼

 #big {  
        border: 1px solid #FF3300;  
        width: 300px;  
        height: 300px;  
        position: relative;  
    }  
      
    #small {  
        background: #99CC00;  
        width: 50px;  
        height: 50px;  
        position: absolute;  
        cursor: pointer;  
    }

2、JavaScript代碼

<script language="javascript">  
function small_down(e) {  
    var obig = document.getElementById("big");  
    var osmall = document.getElementById("small");  
    var e = e || window.event;  
    /*用於保存小的div拖拽前的坐標*/  
    osmall.startX = e.clientX - osmall.offsetLeft;  
    osmall.startY = e.clientY - osmall.offsetTop;  
    /*鼠標的移動事件*/  
    document.onmousemove = function(e) {  
        var e = e || window.event;  
        osmall.style.left = e.clientX - osmall.startX + "px";  
        osmall.style.top = e.clientY - osmall.startY + "px";  
        /*對於大的DIV四個邊界的判斷*/  
        if (e.clientX - osmall.startX <= 0) {  
            osmall.style.left = 0 + "px";  
        }  
        if (e.clientY - osmall.startY <= 0) {  
            osmall.style.top = 0 + "px";  
        }  
        if (e.clientX - osmall.startX >= 250) {  
            osmall.style.left = 250 + "px";  
        }  
        if (e.clientY - osmall.startY >= 250) {  
            osmall.style.top = 250 + "px";  
        }  
    };  
    /*鼠標的抬起事件,終止拖動*/  
    document.onmouseup = function() {  
        document.onmousemove = null;  
        document.onmouseup = null;  
    };  
}  
</script>

3、html代碼

<body>  
        <div id="big">  
            <div id="small" onmousedown="small_down(event)"></div>  
        </div>  
    </body>

---恢復內容結束---

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 讓一個小Div（子）在大Div（父）中垂直水平都居中 react中實現可拖動div 有一個div中包含兩個div，一個固定高度，另一個填滿剩余高度創建一個可拖動的DIV JavaScript:Div層拖動效果讓一個小的div在大的div中居中顯示 CSS中div覆蓋另一個div Div中嵌套一個div，怎么是里面的div居中？如何讓子div在父div盒子中貼底部顯示用Javascript往一個Div中插入一張圖片