鼠标拖拽

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

喜欢与人分享编程技术与工作经验，欢迎加入编程之家官方交流群！