Jquery 实现div拖拽

最新推荐文章于 2021-12-01 11:24:59 发布

富的只剩下代码

最新推荐文章于 2021-12-01 11:24:59 发布

阅读量727

点赞数 1

分类专栏： html jQuery

本文链接：https://blog.csdn.net/liyongke89/article/details/50111841

版权

jQuery 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
   #div1{
       position:absolute;
       width:500px;
       height:500px;
       border:1px solid green;
   }
   #div2{
       position:relative;
       width:50px;
       height:50px;
       border:1px solid red
   }
   #div2:hover{
       cursor :move
   }
</style>
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
   $(document).ready(function(){
       var div1_width = $("#div1").width();
       var div2_width = $("#div2").width();

       var div1_height = $("#div1").height();
       var div2_height = $("#div2").height();
       $("#div2").mousedown(function(event){
           var isMove = true;
           var page_x = event.pageX;
           var page_y = event.pageY;
           var abs_x = event.pageX-$("#div2").offset().left;
           var abs_y = event.pageY-$("#div2").offset().top;
           $("#div1").mousemove(function(event){
               if(isMove){
                   var page_x = event.pageX;
                   var page_y = event.pageY;                                       //console.log("page_x-abs_x>>"+(page_x-abs_x));
                   //console.log("page_y-abs_y>>"+(page_y-abs_y));
                   if(page_x-abs_x<div1_width-div2_width&&page_x-abs_x>0){
                       $("#div2").css({"left":page_x-abs_x});
                   }else{
                       return ;
                   }
                   if(page_y-abs_y<div1_height-div2_height&&page_y-abs_y>0){
                       $("#div2").css({"top":page_y-abs_y});
                   }else{
                       return ;
                   }
               }
           }).mouseup(function(event){
               isMove = false;
           });
       });
   });
</script>
</head>

<body>
<div id="div1">
   <div id="div2">
   </div>
</div>
</body>
</html>

富的只剩下代码

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Jquery 实现div拖拽

New Document #div1{ position:absolute; width:500px; height:500px; border:1px solid green; } #div2{ position:relative;
复制链接

扫一扫