拖拽练习1
第一种方式
在外部用一个obj变量存储着拖拽元素，在到dragstart事件中利用事件委托的形式把每次点击的元素存储到obj这个变量当中，在到drop事件中用事件委托的形式把obj添加到节点上（别忘了在dragover事件中清除浏览器的默认事件呀）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin:0;
padding:0
}
body{
display: flex;
justify-content: space-between;
}
div{
width: 150px;
height: 150px;
border :2px solid blue;
}
p{
height:30px;
background: hotpink;
text-align: center;
line-height: 30px;
user-select: none; /*禁止选中文本*/
}
</style>
</head>
<body>
<div id="left">
<p id="item1" draggable="true">拖拽元素1</p>
<p id="item2" draggable="true">拖拽元素2</p>
<p id="item3" draggable="true">拖拽元素3</p>
<p id="item4" draggable="true">拖拽元素4</p>
</div>
<!-- 文字默认状态下是可以被拖拽的 -->
<div id="middle"></div>
<div id="right"></div>
<script>
//当刚开始拖拽元素的时候就把拖拽的元素给存储起来
//当天是用一个全局变量obj存储着拖拽元素
var obj = null;//初始是null
document.addEventListener('dragstart',function(e){
e = e || window.event;
//一按下就记录的拖拽的元素
obj = e.target;//一旦运动就把this存储在obj里面
},false);
//清除默认事件
document.addEventListener('dragover',function(e){
e = e || window.event;
//阻止掉浏览器的默认行为 让drop事件生效(这种是一套组合)
e.preventDefault();
},false);
//当拖拽元素到目标元素抬起时
document.addEventListener('drop',function(e){
e = e || window.event;
if (e.target.nodeName==='BODY'||e.target.nodeName==='HTML') return;
//一旦鼠标在目标区域里面抬起就把obj添加到里面
e.target.appendChild(obj);
},false);
</script>
</body>
</html>第二种方式
H5拖拽在拖拽的时候提供了一个事件对象，这个事件对象存储着拖拽元素的初始数据
设计拖拽元素事件对象是为了，拖拽到目标元素的时候能够更好的使用拖拽时的初始元素
事件对象.dataTransfer这个属性是用来存储你初始的拖拽数据的
dataTransfer.setData(属性名,属性值) 属性值是字符串 属性值:存储拖拽元素的初始数据(他是键值对的形式)
dataTransfer.getData(属性名) 获取每次存储的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
display: flex;
justify-content: space-between;
}
div{
width:150px;
height:150px;
border:2px solid blue;
}
p{
height: 30px;
background-color: hotpink;
text-align: center;
line-height: 30px;
user-select: none;/*禁止选中文本*/
}
</style>
</head>
<body>
<div id="left">
<p id="item1" draggable="true">拖拽元素1</p>
<p id="item2" draggable="true">拖拽元素2</p>
<p id="item3" draggable="true">拖拽元素3</p>
<p id="item4" draggable="true">拖拽元素4</p>
</div>
<!-- 文字默认状态下是可以被拖拽的 -->
<div id="middle"></div>
<div id="right"></div>
<script>
/*
设计拖拽元素事件对象是为了，拖拽到目标的时候能够更好的使用拖拽时的初始元素
事件对象.dataTransfer这个属性是用来存储你初始的拖拽数据的
* dataTransfer.setData(属性名,属性值) 属性值是字符串 属性值:存储拖拽元素的初始数据(他是键值对的形式)
* dataTransfer.getData(属性名) 获取每次存储的数据
*
*
* */
document.addEventListener('dragstart',function(e){
e = e || window.event;
//当鼠标在拖拽元素中按下的时候，H5就提供了一个对象，这个对象是专门用来存储数据的(存储你在某个元素的初始的数据)
/*
e这个事件对象是H5提供的拖拽的事件对象
事件对象.dataTransfer这个属性是用来存储你初始的拖拽数据的 data(数据) Transfer(转换转义)
*/
//存储拖拽时参数数据 只可以存储字符串格式的
var dt = e.dataTransfer.setData('key',e.target.id);
//存储文件的初始数据.setDate()方法存储初始数据
//他的参数是一个键值对形式的setDate('属性名,e.target)
},false);
//清除默认事件
document.addEventListener('dragover',function(e){
e = e || window.event;
//阻止掉默认行为 让drop事件生效
e.preventDefault();
},false);
//当拖拽元素到目标元素时抬起
document.addEventListener('drop',function(e){
e = e || window.event;
if (e.target.nodeName==='BODY'||e.target.nodeName==='HTML') return;
//因为你初始存储数据的时候是按照(e.dataTransfer.setData('key',e.target.id))这种键值对的方式存储的
//当你获取数据的时候需要e.dataTransfer上面的getData方法，参数是存储数据的对象名即可
//获取节点的id名
// console.log(e.dataTransfer.getData('key'));//他是一个字符串(存储数据只能存储字符串格式的数据)
//获取存储的数据
var id = e.dataTransfer.getData('key');
//获取每次拖拽元素
var dom = document.getElementById(id);
// 一旦鼠标挑起把指定id元素添加到里面
e.target.appendChild(dom);
},false);
</script>
</body>
</html>拖拽练习2
利用H5的拖拽和上传文本图片的API做些一些事情
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
user-select: none;
}
#box {
width: 80%;
margin: 20px auto;
}
#tips{
height: 500px;
background-color: #aaa;
}
</style>
</head>
<body>
<div id="box">
<div id='tips'>请把图片拖放到该区域</div>
<div id="info">
当前累计图片<span id='num'>0</span>张,
一共<span id='size'>0</span>M<br>
<input type="file" multiple>
</div>
</div>
<script>
var oTips = document.getElementById('tips');
var oNum = document.getElementById('num');
var oSize = document.getElementById('size');
var input = document.querySelector('input');
var imgArr = [];//储存所有的图片
//当元素进入目标区域里面触发dragenter事件
oTips.addEventListener('dragenter',function(){
//当里面的文本是请把图片拖放到该区域这些文本就清空
if (this.innerText === '请把图片拖放到该区域') {
//清空里面的文本
this.innerText = '';
};
},false)
//清除浏览器的默认事件 激活ddrop事件
oTips.addEventListener('dragover',function(e){
e = e || window.event;
e.preventDefault();
},false);
//给元素绑定drop事件让图片到目标元素抬起时做些事情
oTips.addEventListener('drop',function(e){
//当拖拽图片的时候，在一个网页中默认情况下浏览器会打开这个图片
e = e || window.event;
//阻止浏览器默认打开图片的默认事件
//拖着图片在网页中 浏览器会默认打开
e.preventDefault();
//存放使用的上传图片
var files = e.dataTransfer.files;
//拖拽图片的时候图片本身就可以作为一波数据，所有拖拽图片的数据自动存储在dataTransfer这个对象中的files属性当中
appendImg(files);
count();
},false);
//读取图片中的数据，并且添加图片
function appendImg(files){
for(var i=0;i<files.length;i++){
//把图片的数据放在Blob中生成一个blob对象
var blob = new Blob([files[i]]);
imgArr.push(files[i]);//往数组里面存储图片的数据
var url = URL.createObjectURL(blob);
var oImg = new Image();
oImg.src = url;//异步代码
oImg.width = 200;
oImg.height = 200;
//当把图片的src属性加载完毕才会把图片放在页面当中
oImg.onload = function(){
oTips.appendChild(this);
};
};
};
//计算上传的图片有多少个 多少M
function count(){
oNum.innerText = imgArr.length;//表示有多少张图片
//计算图片的大小
var result = imgArr.reduce((prev,next)=> prev + next.size,0)/1024/1024;
//每个图片默认的是字节要/1024/1024才能变成
//数字.toFixed()保留两位小数
oSize.innerText = result.toFixed(2);
};
//当点击type类型是file的input框时触发change事件
//当上传文件时就会触发回调函数
input.addEventListener('change',function(){
if(oTips.innerText=='请把图片拖放到该区域'){
oTips.innerText = '';
};
//files类型的input上面的file属性的索引0位置存储了你上传文件的数据
var files = this.files;//存放上传的图片数据
appendImg(files);
count();
},false);
</script>
</body>
</html>H5拖拽对象里面也有files来存储着拖拽文件的初始数据
