javascript - 如何使相对Div可拖动？

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。

谁能告诉我我在做什么错？？？

最佳答案

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

关于javascript - 如何使相对Div可拖动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29916623/