广告

广告

广告

我的位置: 主页 > 红包文章 > 抢红包活动 > Html5原生拖拽相关事件简介以及根本实现

Html5原生拖拽相关事件简介以及根本实现

发布人:陌陌红包群 发时间:2020-12-03 02:05 热度:
这篇文章主要介绍了Html5原生拖拽相关事件简介以及根本实现,文中通过示例代码介绍的非常详细,对大家的学习或者

  短视频,自媒体,达人种草一站处事

这篇文章主要介绍了Html5原生拖拽相关事件简介以及根本实现,文中通过示例代码介绍的非常详细,对大家的学习或者事情具有必然的参考学习价值,需要的伴侣们下面跟着小编来一起学习学习吧

公司项目需求,要实现任务卡片在差别任务列表之间进行拖拽实现任务类另外变动。于是找了一下相关文章,稍微学习了一下。实现效果如下图。

拖拽实现

主要用到的是H5自带的拖拽效果。其实项目前端部分是使用React编写的,也是在使用H5实现了之后才了解到Dan Abramov大佬有个React-DnD组件对原生拖拽要领进行了封装。稍微学习了一下,很强。后续有使用到再写篇文章进行分享。

相关事件界说与用法

涉及一个属性六个事件。事件均为H5原生事件。

属性

draggable:正常div是不允许进行拖动的。需要添加属性draggable="true"将元素设置为可拖动。

事件

ondragstart:拖拽元素事件。在被拖拽时被挪用。

ondrag:拖拽元素事件。在元素正在被拖拽时挪用。

ondragend:拖拽元素事件。在拖拽元素安排时挪用。

ondragenter:安排元素事件。在拖拽元素进入到安排元素有效区域时挪用。

ondragover:安排元素事件。在拖拽元素笼罩安排元素有效区域时挪用

ondragleave:安排元素事件。在拖拽元素分开安排元素有效区域时挪用。

ondrop:安排元素事件。在拖拽元素被安排在安排元素中挪用。

根本代码实现

拖拽元素相关事件实现代码如下。

function handleOndragstart() {
/*
该事件为拖拽元素被拖拽时挪用。一般用于获取该拖拽元素的独一标志,如id等。以便利后续数据更新时进行元素定位
*/
}

function handleOndragend() {
/*
该事件在拖拽元素被安排时挪用。一般用于重置变量操纵
*/
}

function handleOndrag() {
/*
该事件凭小我私家需求进行成果实现
*/
}

拖拽元素H5代码如下

<div
draggable="true"
ondragstart="handleOndragstart()"
ondrag="handleOndarg()"
ondragend="handleOndragend()"
>
该元素为拖拽元素
</div>

安排元素相关事件实现代码如下

/*
默认情况下,数据/元素不能安排到其他元素中。 如果要实现该成果,我们需要防备元素的默认措置惩罚惩罚要领。我们可以通过挪用 event.preventDefault() 要领来实现 ondragover 事件。
*/
function handleOndragover(event) {
event.preventDefault();
/*
在这里进行你的函数措置惩罚惩罚
*/
}

function handleOndragenter(event) {
event.preventDefault();
/*
在这里进行你的函数措置惩罚惩罚
*/
}

function handleOndragleave(event) {
event.preventDefault();
/*
在这里进行你的函数措置惩罚惩罚
*/
}

function handleOndrop(event) {
event.preventDefault(); // 断根默认事件。drop 事件的默认行为是以链接形式打开
/*
一般在该事件中,也就是拖拽元素被放下的时候与后端进行交互进行数据更新
*/

安排元素H5代码如下

<div
ondragenter="handleOndragenter(event)"
ondragover="handleOndragover(event)"
ondragleave="handleOndragleave(event)"
ondrop=“handleOndrop(event)
>
该元素为安排元素
</div>

实例

以下代码可实此刻两个div之间进行子元素的拖拽

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1.0" />
<title>拖拽实现</title>
<style type="text/css">
.parent {
display: flex;
width: 450px;
justify-content: space-around;
}
.container {
height: 300px;
width: 200px;
background-color: rgba(255, 255, 0, 0.3);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.box {
width: 100px;
height: 50px;
background-color: rgba(255, 255, 255, 1);
}
</style>
<script type="text/javascript">
function handleOndragstart(event) {
// 设置被拖动的数据,可简单理解为设置Box的值为被拖动元素的id。此处为"Box"
event.dataTransfer.setData("Box", event.target.id);
}
function handleOndragover(event) {
event.preventDefault();
}
function handleOndrop(event) {
// 拖拽元素被放下时挪用
event.preventDefault();
var data = event.dataTransfer.getData("Box");
// 将拖拽元素追加到改安排元素中
event.target.appendChild(document.getElementById(data));
}
</script>
</head>

分享给朋友: