有大盒子的拖拽(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}); } });