实现拖拽效果
源元素 - 要拖拽的文件
目标元素 - 要拖拽到哪里去
目前实现拖拽效果
使用原生DOM就能实现 - 最麻烦
使用jQuery的插件
HTML5种提供的拖拽功能
HTML5拖拽
1）源元素事件
dragStart - 当鼠标开始拖放时被触发
drag - 当鼠标拖放过程中被触发
dragend 当鼠标拖放结束时被触发
2）目标元素事件
dragover - 当鼠标到达目标元素被触发，会反复触发
dragenter - 当鼠标拖放进入到目标元素内触发
drop - 当鼠标实现拖放效果时被触发
问题：HTML页面默认不允许拖放，称之为HTML页面的默认行为
解决：在dragover的事件中阻止默认行为即可event.preventDefault();
dragleave - 当鼠标离开目标元素时触发
3）dataTransfer对象
作用：类似于window系统的剪切板功能
功能：可以将源元素的信息，存储在这里，提供给目标元素
使用：
使用事件对象获取到dataTransfer对象
var trans = event.dataTransfer;
设置数据
setData(type,data)方法
type:类型，特指标识(id)，一般为字符串
data:设置的数据内容
获取数据
getData(type);
清除数据
clearData(type)
所有的数据内容，存储在浏览器内存中，当使用完数据内容时，要清除
事件对象 - 作为事件处理函数的参数存在
DOM底层代码的默认写法就是event,如果直接使用event就可以不穿event参数，这种写法不标准
4）从本地拖拽文件到页面中
var transfer = event.dataTransfer;
//找到拖拽的文件
var file = transfer.files[0];
//新建文件读取对象
var reader = new FileReader();
//读取文件
reader.readAsDataURL(file);
//读取完以后加载
reader.onload = function(){
d1.innerHTML = "<img src"+reader.result+">";
}
源元素事件例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#d1 {
width: 300px;
height: 300px;
border:solid 1px black;
}
#d2 {
width: 300px;
height: 100px;
border:solid 1px black;
}
</style>
<body>
<div id="d1"><img id="myimg" src="class.jpg" alt="" /></div>
<div id="d2"></div>
</body>
<script type="text/javascript">
var myImg = document.getElementById("myimg");
var d2 = document.getElementById("d2");
myImg.ondragstart = dragStart;
myImg.ondragend = dragEnd;
myImg.ondrag = drag;
function dragStart(){
d2.innerHTML += "开始被拖放<br>";
}
function dragEnd(){
d2.innerHTML += "结束拖放<br>";
}
function drag(){
d2.innerHTML += "正在被拖放<br>";
}
</script>
</html>
目标元素事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#d1 {
width: 300px;
height: 300px;
border:solid 1px black;
float: left;
}
#d2 {
width: 300px;
height: 300px;
border:solid 1px black;
float: right;
}
</style>
<body>
<div id="d1"><img id="myimg" src="class.jpg" alt="" /></div>
<div id="d2"></div>
</body>
<script type="text/javascript">
var myImg = document.getElementById("myimg");
var d2 = document.getElementById("d2");
d2.ondragover = dragover;
d2.ondragenter = dragStart;
d2.ondrop = drag;
d2.ondragleave = dragEnd;
function dragover(event){
event.preventDefault();
console.log("====");
}
function dragStart(event){
console.log("你来了");
}
function dragEnd(event){
console.log("离开");
}
function drag(event){
console.log("不走了");
}
</script>
</html>
从本地拖放图片到页面中
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实现从本地拖放图片到页面中</title>
<style>
div {
width : 500px;
height: 500px;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<!-- TODO 目标元素 -->
<!--draggable="true 可以拖动元素-->
<div id="d1" draggable="true"></div>
<script>
var d1 = document.getElementById("d1");
d1.ondragover = function (event) {
event.preventDefault();
}
d1.ondrop = function (event) {
var dataTrans = event.dataTransfer;
//获取到从本地拖拽进来的文件
var files = dataTrans.files[0];
//创建文件读取对象
var reader = new FileReader();
//读取指定文件
reader.readAsDataURL(files);
//读取完以后，显示图片
reader.onload = function () {
d1.innerHTML = "<img src="+reader.result+">";
}
//清楚内存dataTrans.clearData("")
//取消默认事件
event.preventDefault();
}
</script>
</body>
</html>
实现拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#d1 {
width: 300px;
height: 300px;
border:solid 1px black;
float: left;
}
#d2 {
width: 300px;
height: 300px;
border:solid 1px black;
float: right;
}
</style>
</head>
<body>
<div id="d1"><img id="myImg" src="class.jpg" alt="" /></div>
<div id="d2"></div>
</body>
<script type="text/javascript">
/*使用HTML5种的拖放API实现功能
*
* 源目标事件 - dragstart事件
* 目标元素事件 - drop/dragover事件
* dataTransfer对象
*
*/
myImg.ondragstart=function (event) {
//获取到DataTransfer对象
var dataTrans=event.dataTransfer;
//dataTrans
dataTrans.setData("Text",myImg.src)
}
//目标元素的ondrop事件中，将要
d2.ondrop = function (event) {
var dataTrans = event.dataTransfer;
//获取到拖拽的数据
var mysrc = dataTrans.getData("Text");
d2.innerHTML = "<img src="+mysrc+">";
//将目标元素清空
d1.innerHTML = "";
}
d2.ondragover = function () {
//阻止页面的默认行为,默认不允许拖放,必须在ondragover里
event.preventDefault();
}
/*
*实现拖拽效果要做的事
*
* 源元素的事件
* ondragStart 使用dataTransfer获取到要拖拽元素的信息
* ondragend 移除目标元素
*
* 目标元素事件
* ondragover 取消页面默认不允许拖放的事件
* event.preventDefault()
*
* ondrop
*/
</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
