day01-H5拖拽
01-JS拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:300px;
height:150px;
background:purple;
position:absolute;
left:100px;
top:50px;
}
body{
background:gray;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
//JS拖拽三事件
var oBox = document.getElementById('box');
oBox.onmousedown = function(e){
e = e || event;
//let 表示声明的变量唯一，不可再次被声明
let x = e.clientX - this.offsetLeft;
let y = e.clientY - this.offsetTop;
document.onmousemove = function(e){
e = e || event;
oBox.style.cssText = 'left:' + (e.clientX-x) + 'px;top:' + (e.clientY-y) + 'px';
};
document.onmouseup = function()
{
document.onmousemove = document.onmouseup = null;
}
}
</script>
</body>
</html>
页面效果(可进行拖拽)
02-H5拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:300px;
height:150px;
background:purple;
position:absolute;
left:100px;
top:50px;
}
body{
background:gray;
}
</style>
</head>
<body>
<div id="box" draggable="true"></div>
<script>
// H5拖拽语法
//div 标签中属性 draggable='true' 开关，告诉谷歌内核的浏览器，此元素是可拖拽的
var oBox = document.getElementById('box');
oBox.ondragover = function(e){
e = e || event;
oBox.style.cssText = 'left:' + (e.clientX-100) + 'px;top:' + (e.clientY-50) + 'px';
}
</script>
</body>
</html>
03-H5拖拽七兄弟(七个事件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
background-color:gray;
}
#left{
width:150px;
height: 300px;
background:purple;
float:left;
}
#right{
width:100px;
height:100px;
background:pink;
float:right;
}
</style>
</head>
<body>
<div id="left" draggable="true"></div>
<div id="right" draggable="true"></div>
<script>
// 拖拽元素是 right
// 目标元素是 left
// 只有加上 draggable 属性元素才能被拖拽
var oRight = document.getElementById('right');
var oLeft = document.getElementById('left');
let n = 0;
// 拖拽三事件
oRight.ondragstart = function(){
//拖拽触发一瞬间
this.style.background = 'green';
};
//事件监听
oRight.ondrag = function(){
//连续触发
//拖拽时title值会不断增加
// document.title = n++;
};
oRight.ondragend = function(){
//拖拽结束一瞬间
this.style.background = 'pink';
};
// 被拖拽进入三事件
oLeft.ondragenter = function(){ // 鼠标光标划入该元素中做哪些是
this.style.background = 'yellow';
};
//事件监听
oLeft.ondragover = function(e){ // 鼠标光标划入该元素中连续做哪些事
//将right div 拖拽到 left div 中，鼠标划入right div 时进行事件监听
this.innerHTML = n++;
// 阻止默认事件和事件冒泡
e.preventDefault();
e.stopPropagation();
};
oLeft.ondragleave = function(){
this.style.background = 'lightblue';
};
oLeft.ondrop = function () { //在目标元素上释放时的事件(必须在目标元素内时候有效)
console.log(123);
// 删除被拖拽的元素时需要找到其父级
document.body.removeChild(right);
};
</script>
</body>
</html>
04-火狐兼容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
}
body{
background-color:gray;
}
#left{
width:150px;
height: 300px;
background:purple;
float:left;
}
#right{
width:150px;
height:300px;
float:right;
}
li{
line-height:35px;
border:1px solid red;
}
img{
position: absolute;
left:-9999px;
}
</style>
</head>
<body>
<div id="left" draggable="true"></div>
<ul id="right" draggable="true">
<li draggable="true">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<img id="oImg" src="img/logo.png" alt="">
<script>
/*
* 兼容问题
* dataTransfer对象
* setData(): 设置数据 key和value(必须是字符串)
* getData(): 获取数据,根据key值，获取对应的value
*
* 拖拽元素的图标
* setDragImage: 三个参数(1.指定的图片id属性名, 2.拖拽时坐标X, 3.拖拽时坐标Y)
*
*
* */
// 从right中获取标签li(仅id属性可以这样写)
let oLi = right.querySelectorAll('li');
// 让每个li标签都可被拖拽
oLi.forEach((item,index)=>{
//设置属性
item.setAttribute('draggable','true');
//监听开始拖拽时的事件
item.ondragstart = function(e){
// dataTransfer 谷歌火狐都兼容的对象
console.log(1,e.dataTransfer);
// 让谷歌火狐都兼容，都可拖拽
e.dataTransfer.setData('key',index);
// setDragImage 三个参数: 1.指定的元素 2.坐标X 3.坐标Y
// 让li在被拖拽时候显示指定元素的图片
e.dataTransfer.setDragImage(oImg,20,20)
}
});
left.ondragenter = function(){
this.innerHTML = '请释放你的双手';
};
left.ondragover = function(e){
// 此两行代码目的是让ondrog生效
e.preventDefault();
e.stopPropagation();
};
left.ondragleave = function(){
this.innerHTML = '';
};
left.ondrop = function(e){
this.innerHTML = '拖拽到此删除文件';
right.removeChild(oLi[e.dataTransfer.getData('key')]);
};
</script>
</body>
</html>
05-file对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0px;
padding:0px;
}
html,body{
height:100%;
}
body{
background:url('img/bg.jpg');
background-size:100% 100%;
overflow: hidden;
display: flex;
}
#box{
width:800px;
height:150px;
background:rgba(255,255,255,.5);
margin:auto;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
/*
* 外部图片资源拖拽到指定div内操作
* 类上传图片案例
*
*
*
*
* */
box.ondragover = function(e){
e.preventDefault();
e.stopPropagation();
};
box.ondrop = function(e){
e.preventDefault();
//阻止默认事件 例如拖拽外部图片到指定div中，默认事件时打开图片
e.stopPropagation();
//将 图片详细信息打印在控制台
// console.log(e.dataTransfer.files) //列表
// console.log(e.dataTransfer.files.length)
console.log(e.dataTransfer.files[0].name);
console.log(e.dataTransfer.files[0].type);
// parseInt()取整方法
console.log(parseInt(e.dataTransfer.files[0].size/1024) + 'KB');
console.log(parseInt(e.dataTransfer.files[0].lastModified/1000/60/60/24/30/12));
// 获取图片创建时间
console.log(e.dataTransfer.files[0].lastModifiedDate.toLocaleString());
// 获取图片创建时分秒
console.log(e.dataTransfer.files[0].lastModifiedDate.toLocaleTimeString());
// 获取图片创建日期
console.log(e.dataTransfer.files[0].lastModifiedDate.toLocaleDateString());
/*
* 拖拽预览，将外部资源拖拽至指定元素内并显示
*
*
* */
//文件读取对象，读取获取的文件信息
let oFile = e.dataTransfer.files[0];
// 创建文件读取对象
var file = new FileReader();
// 用此对象分析文件(以图片的url形式进行读取)
file.readAsDataURL(oFile);
//当读取文件成功完成的时候触发此事件
file.onload = function(){
if(/image/.test(this.result)){
// console.log(this.result);
let img = new Image();
//获取读取的文件数据
img.src = this.result;
img.width = 150;
img.onload = function(){
box.appendChild(img)
}
}
}
}
</script>
</body>
</html>
页面效果
