方块拖拽
首先鼠标拖拽要用到三大事件
onmousedown：鼠标选择元素
onmousemove：鼠标移动元素
onmouseup：释放元素，也就是先用鼠标点击元素，然后拖拽元素到某一位置，释放元素的过程
var div1=document.getElementById('div1')
div1.onmousedown=function (event){
var chaX=event.clientX-div1.offsetLeft
var chaY=event.clientY-div1.offsetTop
document.onmousemove=function(event) {
div1.style.left=event.clientX-chaX+'px'
div1.style.top=event.clientY-chaY+'px'}}
document.onmouseup=function(){
document.onmousemove=null
}
}
用鼠标移动纸条
< html >
< head >
< title > 用鼠标移动纸条 </ title >
< script language = " JavaScript " >
<!--
var blnCanMove = false ;
var osX = 0 ;
var osY = 0 ;
function startMove() {
if(blnCanMove) {
event.srcElement.style.left = event.clientX - osX;
event.srcElement.style.top = event.clientY - osY;
mvPage.innerHTML = "(" + event.clientX + "," + event.clientY + ")";
} else {
event.returnValue = false;
}
}
function stopMove() {
if(blnCanMove) {
blnCanMove = false;
event.returnValue = false;
}
}
function initMoveInfo() {
if(event.button == 1) {
//如果是按下了鼠标左键
osX = event.offsetX;
osY = event.offsetY;
blnCanMove = true;
event.srcElement.style.zIndex += 1;
} else {
blnCanMove = false;
}
event.returnValue = false;
}
// -->
</ script >
</ head >
< body >
< div id = " mvPage " style = " position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background-image: url('./number/0.gif'); " onm ousedown = " initMoveInfo(); " onm ousemove = " startMove(); " onm ouseup = " stopMove(); " >
</ div >
< br >< br >< br >
< div id = " mvPage1 " style = " position: absolute; left: 10px; top: 10px; height: 100px; width: 200px; background: springgreen; " onm ousedown = " initMoveInfo(); " onm ousemove = " startMove(); " onm ouseup = " stopMove(); " >
</ div >
</ body >
</ html >
方块拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
margin: 0;
}
#div1{
width: 100px;
height: 100px;
background: red;
/*border-radius: 50%;*/
position: absolute;
left: 0;
top: 0;
}
#div2{
width: 100px;
height: 100px;
background: yellow;
/*border-radius: 50%;*/
position: absolute;
left: 500px;
top: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<script>
var div1=document.getElementById('div1')
div1.onmousedown=function (event){
var chaX=event.clientX-div1.offsetLeft
var chaY=event.clientY-div1.offsetTop
document.onmousemove=function(event) {
div1.style.left=event.clientX-chaX+'px'
div1.style.top=event.clientY-chaY+'px'
if (div1.offsetLeft>=div2.offsetLeft-div2.offsetWidth&&
div1.offsetTop>=div2.offsetTop-div2.offsetWidth&&
div1.offsetLeft<=div2.offsetLeft+div2.offsetWidth&&
div1.offsetTop<=div2.offsetTop+div2.offsetWidth) {
div2.style.background='blue'
}else{
div2.style.background='yellow'
}
}
document.onmouseup=function(){
document.onmousemove=null
}
}
</script>