如何使相對Div拖動？

Question

HTML

<div class="main_box">
<div class="dragable_box"></div>
</div>

CSS

div.main_box{
    width:320px;
    height:480px;
    border:1px solid #000000;
    position: relative;
    margin-left: auto;
    margin-right:auto;
}
div.dragable_box{
    width:100px;
    height:100px;
    border:1px solid #000000;
    position: absolute;
}

腳本

$(document).ready(function(){
    $(".dragable_box").on("mousedown",function(){
        $(document).on("mousemove",function(event){
            $(".dragable_box").css({
                left: event.pageX,
                top: event.pageY
            })
        })
    })
})

當我單擊dragable_box時，它不會隨鼠標指針一起移動。 這是jsfiddle 。

誰能告訴我我在做什么錯？？？

Answer 1

div.main_box{
    width:320px;
    height:480px;
    border:1px solid #000000;
   \*position: relative;*\
    margin-left: auto;
    margin-right:auto;
}

position: relative; 對於父母和position: absolute; 給孩子一個孩子，讓孩子按照父母的方式移動，因此，如果您刪除上述類中的postion:relative ，它將正常工作。

DEMO

Answer 2

只需將您的JQuery代碼更改為此：

$(document).ready(function(){
    $(".main_box").on("mousedown",function(){
        $(document).on("mousemove",function(event){
            $(".dragable_box").css({
                left: event.pageX,
                top: event.pageY
            })
        })
    })
})