html5 拖拽删除,HTML5原生拖拽/拖放⎡Drag & Drop⎦详解

前言

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

拖放的流程对应的事件

我们先看下拖放的流程：

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

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

选中

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

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

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

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

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

语法：

true: 可以拖动

false: 禁止拖动

auto: 跟随浏览器定义是否可以拖动

拖动

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

针对对象

事件名称

说明

被拖动的元素

dragstart

在元素开始被拖动时候触发

drag

在元素被拖动时反复触发

dragend

在拖动操作完成时触发

目的地对象

dragenter

当被拖动元素进入目的地元素所占据的屏幕空间时触发

dragover

当被拖动元素在目的地元素内时触发

dragleave

当被拖动元素没有放下就离开目的地元素时触发

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

释放

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

针对对象

事件名称

说明

目的地对象

drop

当被拖动元素在目的地元素里放下时触发，一般需要取消浏览器的默认行为。

选中拖动释放例子

拖放示例-文本

.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;

}

所有的文字都可拖拽。

此段文字设置了属性draggable="true"

我是url:http://weiqinl.com

Drop Here

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()

}

在整个拖放过程中，我们以上说的是表面现象，事件过程内部还会发生什么事情呢？请看下面HTML5原生拖拽/拖放(drag & drop)详解

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

HTML5拖拽/拖放(drag & drop)详解

H5中拖拽属性: draggable: auto | true | false   拖动事件:   - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...

原生拖拽,拖放事件(drag and drop)

#include #include