jquery实现盒子拖拽

这篇文章主要为大家详细介绍了jquery实现盒子拖拽动画效果,文,感兴趣的小伙伴们可以参考一下

核心代码部分

<script src="js/jquery-1.11.1.js"></script>
<script>
// 给小盒子绑定鼠标按下事件
        $(".small").bind('mousedown',function(){
        // 在整个页面移动事件
            $(document).mousemove(function(e){
            // 获取小盒子的left值    = 鼠标当前的x轴坐标-大盒子的总left值-小盒子宽度的一半
                var small_left = e.pageX-$(".big").offset().left-$(".small").width()/2;
            // 获取小盒子的top值    = 鼠标当前的y轴坐标-大盒子的总top值-小盒子总高度的一半
                var small_top = e.pageY-$(".big").offset().top-$(".small").height()/2;
                // 判断小盒子的left值
                if(small_left <0){
                    small_left = 0;
                }else if(small_left > $(".big").width()-$(".small").width()){
                    small_left = $(".big").width-$(".small").width();
                }
                // 判断小盒子的top值
                if(small_top <0){
                    small_top = 0;
                }else if(small_top > $(".big").width()-$(".small").height()){
                    small_top = $(".big").width-$(".small").height();
                }
                //改变小盒子的llet值和top值并添加鼠标抬起事件解绑移动
                $(".small").css({left:small_left,top:small_top})
            }).mouseup(function(){
                $(this).unbind("mousemove")
            })
        })
    </script>

html,css代码部分

<style>
  *{margin: 0; padding: 0;}
  .big{
      width: 800px; height: 800px;
      position: relative;
      margin: 20px auto;
      background: lightgray;
  }
  .small{
      width: 150px; height: 150px;
      position:absolute;
      background: lightsalmon;
  }
</style>
<div class="big">
        <div class="small"></div>
</div>

附图