html拖拽事件 上传,关于前端上传文件全面基础扫盲贴(五) ----- H5拖拽事件

系列文章

H5拖拽事件(知识点主要来源于HTML 5 拖放)

其实打算出实战代码的，想想好像可以插多一个拖曳扫盲贴，在PC上传文件也经常能用到的，先来看看有关知识点。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。先看看兼容性如何

移动端全线飘红我可以理解的，毕竟不是主要应用交互，

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

元素哦

。

里面的事件有

事件

描述

ondragstart

当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上

ondragenter

当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上

ondragover

拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上(默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式 event.preventDefault() 方法。)

ondrop

被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上

ondragend

当拖拽完成后触发的事件，此事件作用在被拖曳元素上

方法有

方法

作用

setData

设置被拖元素的数据类型和值

getData

返回在 setData() 方法中设置为相同类型的任何数据

实例：

#div1,

#div2 {

width: 200px;

height: 100px;

margin: 10px;

padding: 10px;

border: 1px solid #aaaaaa;

}

#drag {

width: 200px;

height: 100px;

background: red;

}

var text1 = document.querySelector('#text1'),

text2 = document.querySelector('#text2'),

drag = document.querySelector('#drag'),

div1 = document.querySelector('#div1'),

div2 = document.querySelector('#div2');

drag.ondragstart = function (ev) {

text1.innerHTML = '拖拽元素开始被拖拽';

text2.innerHTML = '';

ev

.dataTransfer

.setData("Text", ev.target.id);

};

drag.ondragend = function (ev) {

text1.innerHTML = '拖拽完成';

};

function allowDrop(ev) {

ev.preventDefault();

}

function dragenter(ev) {

text2.innerHTML = '拖曳元素进入目标元素';

}

function drop(ev) {

ev.preventDefault();

var data = ev

.dataTransfer

.getData("Text");

ev

.target

.appendChild(document.getElementById(data));

text2.innerHTML = '被拖拽的元素在目标元素上同时鼠标放开';

}

就讲这么多了，接下来你们可以自己发挥想象做出好多好玩的东西了。