鼠标拖拽
Title
.one {width:200px;height:200px;border:1px solid blue;margin:10px;}
.two {width:50px;height:50px;border:1px solid red;margin:10px;}
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);
};
};
Title
.Box {width:200px;height:200px;border:1px dashed #bbb;}
拖拽文件上传
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();
};
};
总结
以上是编程之家为你收集整理的html5的鼠标拖拽全部内容，希望文章能够帮你解决html5的鼠标拖拽所遇到的程序开发问题。
如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
小编个人微信号 jb51ccc
喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！
