拖拽
拖拽原理
三大事件
+ onmousedown : 選擇元素
+ onmousemove : 移動(dòng)元素
+ onmouseup : 釋放元素
<style>
div{
height: 100px;
width: 100px;
background: yellowgreen;
position: absolute;
}
</style>
<div id="div1"></div>
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(){
oDiv.onmousemove = function(){//鼠標(biāo)移動(dòng)事件是在鼠標(biāo)按下事件之后
}
oDiv.onmouseup = function (){//鼠標(biāo)抬起之后要清除鼠標(biāo)按下事件
oDiv.onmousemove= null;
oDiv.onmouseup = null;
}
}
- 鼠標(biāo)和Div的相對(duì)距離不變
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev){
var ev = ev || window.event;
//鼠標(biāo)和Div的相對(duì)距離
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
oDiv.onmousemove = function(ev){
var ev = ev || window.event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
}
oDiv.onmouseup = function (){
oDiv.onmousemove= null;
oDiv.onmouseup = null;
}
}
把拖拽加到document上
如果拖得太快穿撮， 會(huì)移出div, 可以把onmousemove事件加在document上
注意：移出事件也是在doucment
var oDiv = document.getElementById('div1');
oDiv.onmousedown = function(ev){
var ev = ev || window.event;
var disX = ev.clientX - oDiv.offsetLeft;
var disY = ev.clientY - oDiv.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
oDiv.style.left = ev.clientX - disX + 'px';
oDiv.style.top = ev.clientY - disY + 'px';
}
oDiv.onmouseup = function (){
document.onmousemove= null;
oDiv.onmouseup = null;
}
}
拖拽的問(wèn)題
如果拖拽文字或者圖片, 由于瀏覽器的默認(rèn)行為, 不能正常的拖拽
解決辦法： 阻止瀏覽器默認(rèn)行為
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{;
position: absolute;
}
</style>
</head>
<body>
<img src="img/1.jpg" alt="">
<script>
var oImg = document.getElementsByTagName('img')[0];
oImg.style.position = 'absolute';
oImg.onmousedown = function(ev){
var ev = ev || window.event;
var disX = ev.clientX - oImg.offsetLeft;
var disY = ev.clientY - oImg.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
oImg.style.left = ev.clientX - disX + 'px';
oImg.style.top = ev.clientY - disY + 'px';
return false;//阻止瀏覽器默認(rèn)行為
}
oImg.onmouseup = function (){
document.onmousemove= null;
oImg.onmouseup = null;
}
return false;//阻止瀏覽器默認(rèn)行為
}
</script>
</body>
</html>
拖拽的封裝
兩個(gè)步驟：
- 將拖拽代碼全部放進(jìn)drag函數(shù)中
- 把需要變化的變量改成參數(shù)
function drag(obj){
obj.onmousedown = function(ev){
var ev = ev || window.event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
return false;
}
obj.onmouseup = function (){
document.onmousemove= null;
obj.onmouseup = null;
}
return false;
}
}
限制拖拽的范圍
在窗口內(nèi)拖動(dòng)
function drag(obj){
obj.onmousedown = function(ev){
var ev = ev || window.event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
var left = ev.clientX - disX;
var top = ev.clientY - disY;
if(left<0){
left=0;
}
else if(left>document.documentElement.clientWidth-obj.offsetWidth){
left = document.documentElement.clientWidth-obj.offsetWidth;
}
if(top<0){
top=0;
}
else if(top>document.documentElement.clientHeight-obj.offsetHeight){
top = document.documentElement.clientHeight-obj.offsetHeight;
}
obj.style.left = left + 'px';
obj.style.top = top + 'px';
return false;
}
obj.onmouseup = function (){
document.onmousemove= null;
obj.onmouseup = null;
}
return false;
}
}
磁性吸附效果
比如說(shuō)以前的一些音樂(lè)播放器, 播放列表和歌詞是兩個(gè)分開(kāi)的面板, 可以分開(kāi)可以合并
合并的時(shí)候不需要精確的拖拽，而是拖拽到兩個(gè)面板距離很近時(shí)自動(dòng)合并
function drag(obj){
obj.onmousedown = function(ev){
var ev = ev || window.event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
var left = ev.clientX - disX;
var top = ev.clientY - disY;
if(left<100){//距離可視區(qū)域范圍的四邊小于50px变勇，則元素將直接吸附對(duì)應(yīng)的邊上
left=0;
}
else if(left>document.documentElement.clientWidth-obj.offsetWidth){
left = document.documentElement.clientWidth-obj.offsetWidth;
}
if(top<0){
top=0;
}
else if(top>document.documentElement.clientHeight-obj.offsetHeight){
top = document.documentElement.clientHeight-obj.offsetHeight;
}
obj.style.left = left + 'px';
obj.style.top = top + 'px';
return false;
}
obj.onmouseup = function (){
document.onmousemove= null;
obj.onmouseup = null;
}
return false;
}
}
碰撞檢測(cè)
js中我們使用的是判斷兩個(gè)物體位置是否重合來(lái)判斷兩個(gè)物體是否發(fā)生了碰撞
常用的方法是使用九宮格法
拖動(dòng)div, 如果檢測(cè)到碰撞, 則改變圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
height: 100px;
width: 100px;
background: yellowgreen;
position: absolute;
}
img{
position: absolute;
top: 300px;
left: 500px;
}
</style>
</head>
<body>
<div id="div1"></div>
<img src="img/1.jpg" alt="">
<script>
function preventDefault(e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
}
function addEvent(node, type, handler) {
if (!node) return false;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
return true;
}
else if (node.attachEvent) {
node['e' + type + handler] = handler;
node[type + handler] = function() {
node['e' + type + handler](window.event);
};
node.attachEvent('on' + type, node[type + handler]);
return true;
}
return false;
}
function removeEvent(node, type, handler) {
if (!node) return false;
if (node.removeEventListener) {
node.removeEventListener(type, handler, false);
return true;
}
else if (node.detachEvent) {
node.detachEvent('on' + type, node[type + handler]);
node[type + handler] = null;
}
return false;
}
function drag(obj){
addEvent(obj, 'mousedown', function(ev){
function onMousemove(ev){
var ev = ev || window.event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
preventDefault(ev);
}
function onMouseup(ev){
removeEvent(document, 'mousemove', onMousemove);
removeEvent(document, 'mouseup', onMouseup);
}
var ev = ev || window.event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
addEvent(document, 'mousemove', onMousemove);
addEvent(document, 'mouseup', onMouseup);
preventDefault(ev);
})
}
var oDiv = document.getElementById('div1');
var oImg = document.getElementsByTagName('img')[0];
drag(oDiv);
addEvent(oDiv, 'mousemove', function(ev){
var ev = ev || window.event;
var oDrag = this;
var oDragL = oDrag.offsetLeft;
var oDragT = oDrag.offsetTop;
var oDragW = oDrag.offsetWidth;
var oDragH = oDrag.offsetHeight;
var oTarget = oImg;
var oTargetL = oTarget.offsetLeft;
var oTargetT = oTarget.offsetTop;
var oTargetW = oTarget.offsetWidth;
var oTargetH = oTarget.offsetHeight;
if( oDragL > oTargetL - oDragW &&
oDragL < oTargetL+ oTargetW &&
oDragT > oTargetT - oDragH &&
oDragT < oTargetT + oTargetH
){//碰撞
oTarget.src = 'img/2.jpg';
}
else{
oTarget.src = 'img/1.jpg';
}
})
</script>
</body>
</html>
