有大盒子的拖拽（jquery）

css

*{margin: 0; padding: 0;list-style: none;}   
.box {width: 500px;height: 300px;border: 1px solid #000;background:lightgray;margin:100px auto;position:relative;}
.box span{position:absolute;left:0;top:0;width: 50px;height: 50px;border: 1px solid #000;background-color:pink;}

html

<div class="box">
           <span> </span>
</div>

js

 var check = false;
            $('span').mousedown(function(event) {
                check=true;
            });

            $(window).mouseup(function(event) {
                check=false;
            });

        $('.box').mousemove(function(event) {
                if(check==true){
                     var spanL = event.pageX-$('.box').offset().left-25;
                     var spanT = event.pageY-$('.box').offset().top-25;

            if(spanL<0){spanL=0;}
            if(spanT<0){spanT=0;}
            if(spanL>$('.box').width()-52){spanL=$('.box').width()-52}
            if(spanT>$('.box').height()-52){spanT=$('.box').height()-52}    

            $('span').css({'left':spanL,"top":spanT});
                }
           
        });