html部分：比较简单，主要就是设置这个可拖拉的范围和方块的元素 （提示：记得自己引入jquery
<!DOCTYPEhtml><html><head><metacharset='utf-8'><metahttp-equiv='X-UA-Compatible'content='IE=edge'><title></title><metaname='viewport'content='width=device-width,initial-scale=1'><linkrel='stylesheet'type='text/css'media='screen'href='index.css'><scriptsrc="jquery.js">type="text/javascript"</script><scriptsrc='index.js'type="text/javascript"></script></head><body><div><span></span></div></body></html>
css部分的话主要就是对小方块脱离当前流，也就是absolute，能够自由的在这个范围的上方移动，个人还给元素都加上了背景颜色，便于区分
div{width:800px;height:600px;position:relative;background-color:aliceblue;}span{width:100px;height:100px;background-color:black;left:0;position:absolute;top:0;}接下来就是最关键的js部分，这部分的话主要是对当前鼠标点击情况下的一些处理 首先对鼠标相关的事件进行监听，在判断当前鼠标点击下（也就是mousedown后）对当前鼠标移动的这个位置作判断——是否有移除这个设置的范围，如果没有出去才设置移动，有的话就卡在边上不准动了
$(function(){$("span").mousedown(function(){$(document).mousemove(function(e){varspan_left=e.pageX-$("div").offset().left-$('span').width()/2;varspan_top=e.pageY-$("div").offset().top-$("span").height()/2;if(span_left<0){span_left=0;}elseif(span_left>$('div').width()-$("span").width()){span_left=$("div").width()-$('span').width();}if(span_top<0){span_top=0;}elseif(span_top>$("div").height()-$("span").height()){span_top=$('div').height()-$('span').height();}$('span').css({left:span_left,top:span_top});}).mouseup(function(){$(this).unbind('mousemove');})})})