鼠标拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.one {width:200px;height:200px;border:1px solid blue;margin:10px;}
.two {width: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 {width: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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。