在指定的图层区域范围内，可通过鼠标随意拖动图层，很方便的一个js特效，根据自己的需求来修改即可。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>js实现指定范围内图层拖动效果_武鸣人</title>
<style>
/* 绝对定位 */
#wwwwumingren{
width:100px;
height:100px;
background:#bbb;
position:absolute;
left:0px;
top:0px;
cursor:move;
}
.wuming_ren{
border:1px solid #ccc;
width:600px;
height:600px;
position:relative;
margin:50px 50px 50px 50px;
}
</style>
</head>
<body unselectable="on" onselectstart="return false;" style="-moz-user-select:none;">
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div class="wuming_ren" id="bor">
<div id='wwwwumingren'>可以在范围内拖动</div>
</div>
<script>
var _$ = function(id){
return document.getElementById(id);
}
function bindEvent(node,eventType,callback){
if(node.attachEvent){
if(eventType.indexOf('on')){eventType = 'on' + eventType}
node.attachEvent(eventType,callback);
}
else{
if(!eventType.indexOf('on')){
eventType = eventType.substring(2,eventType.length)
}
node.addEventListener(eventType,callback,false);
}
return callback;
}
function removeEvent(node,eventType,callback){
if(node.detachEvent){
if(eventType.indexOf('on')){eventType = 'on' + eventType}
node.detachEvent(eventType,callback);
}
else{
if(!eventType.indexOf('on')){
eventType = eventType.substring(2,eventType.length);
}
node.removeEventListener(eventType,callback,false);
}
}
//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
//创建接口
function __drag__(dragger){
var drag = bindEvent(dragger,'onmousedown',function(e){
e = e || event;
var mouseX = e.clientX || e.pageX;
var mouseY = e.clientY || e.pageY;
var objStyle = dragger.currentStyle || window.getComputedStyle(dragger,null);
var objX = parseInt(objStyle.left) || 0;
var objY = parseInt(objStyle.top) || 0;
var limitX = mouseX - objX ;
var limitY = mouseY - objY ;
if(!dragger.onDrag){
dragger.onDrag = bindEvent(document,'onmousemove',function(e){
e = e || event;
dragger.style.left = (e.clientX || e.pageX) - limitX + 'px';
dragger.style.top = (e.clientY || e.pageY) - limitY + 'px';
if(parseInt(dragger.style.left)<0){
dragger.style.left=0+"px";
}
if(parseInt(dragger.style.left)>500){
dragger.style.left=500+"px";
}
if(parseInt(dragger.style.top)>500){
dragger.style.top=500+"px";
}
if(parseInt(dragger.style.top)<0){
dragger.style.top=0+"px";
}
});
dragger.onDragEnd = bindEvent(document,'onmouseup',function(){
removeEvent(document,'onmousemove',dragger.onDrag);
removeEvent(document,'onmouseup',dragger.onDragEnd);
try{
delete dragger.onDrag;
delete dragger.onDragEnd;
}catch(e){
dragger.removeAttribute('onDrag');
dragger.removeAttribute('onDragEnd');
}
})
}
})
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
__drag__(_$("wwwwumingren"));
</script>
</body>
</html>