js拖拽原理和碰撞原理
拖拽的原理
onmousedown 选择元素
onmousemove 移动元素
onmouseup 释放元素
1：如果拖拽的时候有文字:被选中，会产生问题
原因：当鼠标按下的时如果页面中有文字或者图片被选中的时候，则会发生文字默认可以被拖动，因此
标准 ：e.preventDefalut();
阻止他的默认行为 非标准的阻止默认行为
非标准：window.event.returnValue=false;
2：给某元素设置全局捕获，当我们给一个元素设置全局捕获，那么这个元素会监听后续发生的所有事件，当有事件发生的时候，就会被当前设置了全局捕获的元素触发
obj.setCapture();
示例代码：
function drag(obj){ //obj传入一个element
obj.onmousedown=function(ev){
var e=ev || event;
var L=e.clientX-obj.offsetLeft;
var T=e.clientY-obj.offsetTop;
document.onmousemove=function(ev){
var e=ev || event;
//兼容ie无法阻止事件的默认行为，设置全局捕获，这个全局捕获也只适用于ie
if(obj.setCapture){
obj.setCapture();
}
var oL=e.clientX-L;
var oT=e.clientY-T;
var w=winW();
var h=winH();
//给拖拽添加吸附效果
if(oL<150){oL=0}else if(oL> w-obj.offsetWidth-150){ oL=w-obj.offsetWidth}
if(oT<150){oT=0}else if(oT> h-obj.offsetHeight-150){oT=h-obj.offsetHeight}
obj.style.left=oL+'px';
obj.style.top=oT+'px';
}
document.onmouseup=function(){
document.onmouseup=document.onmousemove=null;
//释放全局捕获
if(obj.releaseCapture){
obj.releaseCapture();
}
}
return false;
}
}
碰撞原理
检测位置重合或者边重合
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 100px; background: red; position: absolute; z-index: 2;}
#img1 { position: absolute; left: 500px; top: 200px;}
</style>
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oImg = document.getElementById('img1');
drag(oDiv);
function drag(obj) {
obj.onmousedown = function(ev) {
var ev = ev || event;
var disX = ev.clientX - this.offsetLeft;
var disY = ev.clientY - this.offsetTop;
if ( obj.setCapture ) {
obj.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || event;
var L = ev.clientX - disX;
var T = ev.clientY - disY;
var L1 = L;
var R1 = L + obj.offsetWidth;
var T1 = T;
var B1 = T + obj.offsetHeight;
var L2 = oImg.offsetLeft;
var R2 = L2 + oImg.offsetWidth;
var T2 = oImg.offsetTop;
var B2 = T2 + oImg.offsetHeight;
if ( R1 < L2 || L1 > R2 || B1 < T2 || T1 > B2 ) {
oImg.src = '1.jpg';
} else {
oImg.src = '2.jpg';
}
obj.style.left = L + 'px';
obj.style.top = T + 'px';
}
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
if ( obj.releaseCapture ) {
obj.releaseCapture();
}
}
return false;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
<img src="1.jpg" id="img1" />
</body>
</html>
这里检测发生碰撞碰撞图片发生颜色变化
扩展
1、拖拽改变层大小
2、模拟滚动条控制内容滚动
3、模拟滚动条控制元素的变化
