鼠标拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one {200px;height:200px;border:1px solid blue;margin:10px;}
.two {50px;height:50px;border:1px solid red;margin:10px;}
</style>
</head>
<body>
<div class="one" id="one"></div>
<!--必须设置元素为可拖拽-->
<div class="two" id="two" draggable="true"></div>
</body>
<script>
window.onload = function() {
//two为拖拽对象，one为目标对象
var one = document.getElementById("one");
var two = document.getElementById("two");
//拖拽开始事件
two.ondragstart = function(e) {
//dataTransfer对象，拖拽对象用来传递数据的媒介
e.dataTransfer.setData('text', '哈哈哈');
one.innerHTML += "开始";
};
//拖拽移动事件
two.ondrag = function(e) {
};
//拖拽结束事件
two.ondragend = function(e) {
one.innerHTML += "结束";
};
//拖曳元素进入目标元素的时候触发的事件
one.ondragenter = function(e) {
this.innerHTML += "进入";
e.preventDefault();
};
//拖拽元素在目标元素上移动的时候触发的事件
one.ondragover = function(e) {
this.innerHTML += "移动";
//必须阻止默认事件，否则ondrop无法触发
e.preventDefault();
};
//拖拽元素离开目标元素时触发的事件
one.ondragleave = function(e) {
this.innerHTML += "离开";
};
//拖拽元素在目标元素上同时鼠标放开触发的事件
one.ondrop = function(e) {
two.innerHTML = e.dataTransfer.getData('text');
this.appendChild(two);
};
};
</script>
</html>
拖拽文件上传
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {200px;height:200px;border:1px dashed #bbb;}
</style>
</head>
<body>
<div class="box" id="box">拖拽文件上传</div>
</body>
<script>
window.onload = function() {
var box = document.getElementById("box");
//拖曳元素进入目标元素的时候触发的事件
box.ondragenter = function(e) {
e.preventDefault();
};
//拖拽元素在目标元素上移动的时候触发的事件
box.ondragover = function(e) {
e.preventDefault();
};
//拖拽元素离开目标元素时触发的事件
box.ondragleave = function(e) {
e.preventDefault();
};
//拖拽元素在目标元素上同时鼠标放开触发的事件
box.ondrop = function(e) {
//e.dataTransfer.files可以访问拖拽的文件信息
var file = e.dataTransfer.files[0];
//创建一个FormData对象
var fd = new FormData();
//把文件添加到FormData对象中
fd.append('pic', file);
var xhr = new XMLHttpRequest();
xhr.open("post", "test.php", true);
xhr.send(fd);
e.preventDefault();
};
};
</script>
</html>