# 事件
# drag
- ondragenter 拖拽进入
- ondragleave 拖拽离开
- ondragover 未松手
- ondrop 松手
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {
width:400px;
height:150px;
border:1px solid black;
background:#CCC;
position: absolute;
margin-left: -200px;
margin-top: -75px;
left:50%;
top:50%;
text-align:center;
line-height:150px;
}
</style>
<script>
window.onload=function (){
let oBox=document.querySelector('.box');
oBox.ondragenter=function (){
oBox.innerHTML='松手上传';
};
oBox.ondragleave=function (){
oBox.innerHTML='请拖到这里';
};
oBox.ondragover=function (){ //只要鼠标还没松手、并且还没离开，一直不停发生
console.log("aaaa");
//ondragover不阻止默认事件，ondrop不会触发
return false;
};
oBox.ondrop=function (ev){
//alert('松手');
let data=new FormData();
console.log(ev.dataTransfer)
console.log(ev.dataTransfer.files)
Array.from(ev.dataTransfer.files).forEach(file=>{
data.append('f1', file);
});
//
let oAjax=new XMLHttpRequest();
//POST
oAjax.open('POST', `http://localhost:8080/api`, true);
oAjax.send(data);
oAjax.onreadystatechange=function (){
if(oAjax.readyState==4){
if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304){
alert('上传成功');
}else{
alert('上传失败');
}
}
};
return false;
};
};
</script>
</head>
<body>
<div class="box">
请拖到这里
</div>
</body>
</html>
ev.dataTransfer.files 传递的文件
<div class="dropzone">
<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
This div is draggable
</div>
</div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<div class="dropzone"></div>
<style>
#draggable {
width: 200px;
height: 20px;
text-align: center;
background: white;
}
.dropzone {
width: 200px;
height: 20px;
background: blueviolet;
margin-bottom: 10px;
padding: 10px;
}
</style>
<script>
var dragged;
/* 拖动目标元素时触发drag事件 */
document.addEventListener("drag", function( event ) {
}, false);
document.addEventListener("dragstart", function( event ) {
// 保存拖动元素的引用(ref.)
dragged = event.target;
// 使其半透明
event.target.style.opacity = .5;
}, false);
document.addEventListener("dragend", function( event ) {
// 重置透明度
event.target.style.opacity = "";
}, false);
/* 放置目标元素时触发事件 */
document.addEventListener("dragover", function( event ) {
// 阻止默认动作以启用drop
event.preventDefault();
}, false);
document.addEventListener("dragenter", function( event ) {
// 当可拖动的元素进入可放置的目标时高亮目标节点
if ( event.target.className == "dropzone" ) {
event.target.style.background = "purple";
}
}, false);
document.addEventListener("dragleave", function( event ) {
// 当拖动元素离开可放置目标节点，重置其背景
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
}
}, false);
document.addEventListener("drop", function( event ) {
// 阻止默认动作（如打开一些元素的链接）
event.preventDefault();
// 将拖动的元素到所选择的放置目标节点中
if ( event.target.className == "dropzone" ) {
event.target.style.background = "";
dragged.parentNode.removeChild( dragged );
event.target.appendChild( dragged );
}
}, false);
</script>
# touch事件
targetTouches:整个屏幕上的手指的触发
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<title></title>
<style media="screen">
.box {width:200px; height:200px; background:#CCC; transform:translate(0px,0px);}
</style>
<script>
window.onload=function (){
let oBox=document.getElementsByClassName('box')[0];
let x=0,y=0;
oBox.addEventListener('touchstart', function (ev){
let dir='';
let disX=ev.targetTouches[0].clientX-x;
let disY=ev.targetTouches[0].clientY-y;
let startX=ev.targetTouches[0].clientX;
let startY=ev.targetTouches[0].clientY;
function fnMove(ev){
if(dir==''){
//等待方向确定——用户超出5px
if(Math.abs(ev.targetTouches[0].clientX-startX)>=5){
dir='x';
}else if(Math.abs(ev.targetTouches[0].clientY-startY)>=5){
dir='y';
}
}else{
if(dir=='x'){
x=ev.targetTouches[0].clientX-disX;
}else if(dir=='y'){
y=ev.targetTouches[0].clientY-disY;
}
oBox.style.transform=`translate(${x}px,${y}px)`;
}
}
function fnEnd(){
oBox.removeEventListener('touchmove', fnMove, false);
oBox.removeEventListener('touchend', fnEnd, false);
}
oBox.addEventListener('touchmove', fnMove, false);
oBox.addEventListener('touchend', fnEnd, false);
}, false);
};
</script>
</head>
<body>
<div class="box">
</div>
</body>
</html>
- 多点触碰
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title></title>
<style media="screen">
body {height:2000px;}
.box {
width:200px;
height:200px;
background:#CCC;
border:1px solid black;
position:absolute;
line-height:200px;
text-align:center;
font-size:40px;
left:50%;
top:150px;
margin-left:-100px;
transform:scale(1);
}
</style>
<script>
function calcDistance(touch1, touch2){
return Math.sqrt(
Math.pow(touch1.clientX-touch2.clientX, 2), Math.pow(touch1.clientY-touch2.clientY, 2)
);
}
window.onload=function (){
let oBox=document.getElementsByClassName('box')[0];
let dis1,dis2;
let scale=1.0,old_scale;
document.addEventListener('touchstart', function (ev){
if(ev.targetTouches.length>=2){
dis1=calcDistance(ev.targetTouches[0], ev.targetTouches[1]);
old_scale=scale;
}
}, false);
document.addEventListener('touchmove', function (ev){
if(ev.targetTouches.length>=2){
dis2=calcDistance(ev.targetTouches[0], ev.targetTouches[1]);
scale=old_scale*dis2/dis1;
oBox.style.transform=`scale(${scale})`;
}
}, false);
};
</script>
</head>
<body>
<div class="box">asdfasdf</div>
</body>
</html>
← 解码编码 script标签上的属性 →