HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

时间:2020-12-01 23:16:51

前言

拖放(drap && drop)在我们平时的工作中,经常遇到。它表示:抓取对象以后拖放到另一个位置。目前,它是HTML5标准的一部分。我从几个方面学习并实践这个功能。

拖放的流程对应的事件

我们先看下拖放的流程:

选中  --->  拖动  ---> 释放 

然后,我们一步步看下这个过程中,会发生的事情。

选中

在HTML5标准中,为了使元素可拖动,把draggable属性设置为true。

文本、图片和链接是默认可以拖放的,它们的draggable属性自动被设置成了true。

图片和链接按住鼠标左键选中,就可以拖放。

文本只有在被选中的情况下才能拖放。如果显示设置文本的draggable属性为true,按住鼠标左键也可以直接拖放。

draggable属性:设置元素是否可拖动。

语法:<element draggable="true | false | auto" >

  • true: 可以拖动
  • false: 禁止拖动
  • auto: 跟随浏览器定义是否可以拖动

拖动

每一个可拖动的元素,在拖动过程中,都会经历三个过程,拖动开始-->拖动过程中--> 拖动结束

针对对象 事件名称 说明
被拖动的元素 dragstart 在元素开始被拖动时候触发
drag 在元素被拖动时反复触发
dragend 在拖动操作完成时触发
目的地对象 dragenter 当被拖动元素进入目的地元素所占据的屏幕空间时触发
dragover 当被拖动元素在目的地元素内时触发
dragleave 当被拖动元素没有放下就离开目的地元素时触发

dragenter和dragover事件的默认行为是拒绝接受任何被拖放的元素。因此,我们必须阻止浏览器这种默认行为。e.preventDefault();

释放

到达目的地之后,释放元素事件

针对对象 事件名称 说明
目的地对象 drop 当被拖动元素在目的地元素里放下时触发,一般需要取消浏览器的默认行为。

选中拖动释放例子

<!DOCTYPE HTML>
<html> <head>
<title>拖放示例-文本</title>
</head>
<style>
.src {
display: flex;
} .dropabled {
flex: 1;
} .txt {
color: green;
} .img {
width: 100px;
height: 100px;
border: 1px solid gray;
} .target {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
border: 1px solid gray;
color: red;
}
</style> <body>
<div class="src">
<div class="dragabled">
<div class="txt" id="txt">
所有的文字都可拖拽。
<p draggable="true">此段文字设置了属性draggable="true"</p>
</div>
<div class="url" id="url">
<a href="http://weiqinl.com" target="_blank">我是url:http://weiqinl.com</a>
</div>
<img class="img" id="tupian1" src="img1.png" alt="图片1" />
<img class="img" id="tupian2" src="img2.png" alt="图片2" />
</div>
<div id='target' class="dropabled target">Drop Here</div>
</div>
<script>
var dragSrc = document.getElementById('txt')
var target = document.getElementById('target') dragSrc.ondragstart = handle_start
dragSrc.ondrag = handle_drag
dragSrc.ondragend = handle_end function handle_start(e) {
console.log('dragstart-在元素开始被拖动时候触发')
} function handle_drag() {
console.log('drag-在元素被拖动时候反复触发')
} function handle_end() {
console.log('dragend-在拖动操作完成时触发')
} target.ondragenter = handle_enter
target.ondragover = handle_over
target.ondragleave = handle_leave target.ondrop = handle_drop function handle_enter(e) {
console.log('handle_enter-当元素进入目的地时触发')
// 阻止浏览器默认行为
e.preventDefault()
} function handle_over(e) {
console.log('handle_over-当元素在目的地时触发')
// 阻止浏览器默认行为
e.preventDefault()
} function handle_leave(e) {
console.log('handle_leave-当元素离开目的地时触发')
// 阻止浏览器默认行为
// e.preventDefault()
} function handle_drop(e) {
console.log('handle_drop-当元素在目的地放下时触发')
var t = Date.now()
target.innerHTML = ''
target.append(t + '-拖放触发的事件。')
e.preventDefault()
}
</script>
</body> </html>

drag-drop事件触发

在整个拖放过程中,我们以上说的是表面现象,事件过程内部还会发生什么事情呢?请看下面