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>  

 

 

發佈留言