Html5實現拖拽Div

1,實現效果:點擊Div塊並拖動鼠標,移動Div的位置。

2,實現代碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移動div</title>
</head>
<body>
<div id="divSlider" style="width: 100px;height: 100px;background-color: deepskyblue;
position: absolute;top: 10px;left: 10px;">
</div>

<script>
    var divSlider = document.getElementById("divSlider");
    divSlider.addEventListener('mousedown', mouseDown, false);

    document.addEventListener('mouseup', mouseUp, false);

    function mouseDown() {
        document.addEventListener('mousemove', sliderMove, false);
    }

    function mouseUp() {
        document.removeEventListener('mousemove', sliderMove, false);
    }
    function sliderMove(e) {
        // 解決拖拽鼠標粘滯的問題
        // if (e.preventDefault) {
        //     e.preventDefault();
        // } else {
        //     e.returnValue = false;
        // }
        divSlider.style.left = e.clientX + 'px';
        divSlider.style.top = e.clientY + 'px';
    }
</script>

</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章