jquery实现鼠标拖动

nfs13nfs14 2011-10-20 08:21:02

左键按住，然后移动，div跟着移动，我这样写不行



$(".sign_div").mousedown(function(e){ 

	      var x,y;       

	      var offset = $(this).offset();   

	      x = e.pageX - offset.left;        

	      y = e.pageY - offset.top;

	      $(this).bind("mousemove",function(ev){     

	       var _x = ev.pageX - x;                  

	       var _y = ev.pageY - y;

	       $(this).css({"left":_x+"px", "top":_y+"px"});   

	      });

	     }).mouseup(function(){

	      $(this).unbind("mousemove");     

	     });

求教，或者直接给个可行的

...全文

308 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

YQ君 2011-10-24

打赏
举报

http://yqjun.tk/javascript/js-windows-oop/

原生JS写的拖扯、缩放等功能的窗口

hardy8818 2011-10-24

打赏
举报

//对首页的框体进行拖拽绑定
$( "#controldiv" ).sortable({
distance: 30,
revert: true
});
$( ".window_control_frame" ).disableSelection();
上为拖拽区域范围
下为拖拽框体

需再录JS
<script type="text/javascript" src="jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery.ui.mouse.js"></script>
<script type="text/javascript" src="jquery.ui.sortable.js"></script>

szwx855 2011-10-24

打赏
举报



<HTML>

	<head>

	<script type ="text/javascript" src="../js/jquery.js"></script>

       <script type="text/javascript">  

var b = function(){ 

	   

    $("body").append("<div id='hid' style='background:red;position:absolute;width:880;height:120'>我是可以拖动的半透明div</div>");   

    $("#hid").fadeTo("slow", 0.5);   

    $("#hid").mousedown(function(event){   

        var offset=$("#hid").offset();   

        x1=event.clientX-offset.left;   

        y1=event.clientY-offset.top;   

        $("#hid").mousemove(function(event){   

            $("#hid").css("left",(event.clientX-x1)+"px");   

            $("#hid").css("top",(event.clientY-y1)+"px");   

        });   

        $("#hid").mouseup(function(event){   

            $("#hid").unbind("mousemove");   

        });   

    });   

}   

</script>  

    </head>  

    <body>  

        <input type=button value="点我显示div" onclick="b()">  

    </body>  

</html>