jQuery實現鼠標拖拽div

由於頁面中許多p是通過數據庫讀取出來的，在id方面不好操作，於是想到瞭可以另外添加一個class名，用jQuery實現瞭p框的移動，即鼠標拖拽：

p如下：添加的class為layer

 

<p style="z-index: 3; top: 80px; left: 160px" id="Layer3" class="Face6 layer" ondblclick="Show(1)">  
                        <p class="Num">  
                            編號：3  
                            <img onclick="Close(3)" alt="關閉" src="../images/close.gif"></p>  
                        <p class="Detail">  
                            <img alt="頭像" src="flowers/icon2.gif" align="middle"><span class="Head">小主</span><br>  
                            小主，你要照顧好自己，一切安好哦</p>  
                        <p class="Sign" align="right">  
                            testtest</p>  
                    </p>  

 

 

jQuery代碼如下：

 

<script type="text/javascript">  
    jQuery(document).ready(  
            function () {  
                $('.layer').mousedown(  
                        function (event) {  
                            var isMove = true;  
                            var abs_x = event.pageX - $('.layer').offset().left;  
                            var abs_y = event.pageY - $('.layer').offset().top;  
                            $(document).mousemove(function (event) {  
                                        if (isMove) {  
                                            var obj = $('.layer');  
                                            obj.css({'left':event.pageX - abs_x, 'top':event.pageY - abs_y});  
                                        }  
                                    }  
                            ).mouseup(  
                                    function () {  
                                        isMove = false;  
                                    }  
                            );  
                        }  
                );  
  
            }  
    );  
</script>