Html5原生拖拽相关事件简介以及基础实现


Posted in HTML / CSS onNovember 19, 2020

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

拖拽实现

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 name="viewport" 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>

  <body>
    <div class="parent">
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      >
        <div
          class="box"
          draggable="true"
          id="Box"
          ondragstart="handleOndragstart(event)"
        ></div>
      </div>
      <div
        class="container"
        ondragover="handleOndragover(event)"
        ondrop="handleOndrop(event)"
      ></div>
    </div>
  </body>
</html>

最后

暂时写这么多吧。以上的实例也是用H5写的,并没有使用React实现。以后再试着写个React版的简单demo吧。这应该也算是我的第一篇分享文章,希望能坚持下去。

参考链接:
https://3water.com/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2

到此这篇关于Html5原生拖拽相关事件简介以及基础实现的文章就介绍到这了,更多相关Html5原生拖拽内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
Nov 12 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
Feb 24 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
html5 学习简单的拾色器
Sep 03 HTML / CSS
用HTML5实现网站在windows8中贴靠的方法
Apr 21 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
详解移动端h5页面根据屏幕适配的四种方案
Apr 15 HTML / CSS
html5跳转小程序wx-open-launch-weapp踩坑
Dec 02 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 #HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
Nov 10 #HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 #HTML / CSS
萌新HTML5 入门指南(二)
Nov 09 #HTML / CSS
萌新的HTML5 入门指南
Nov 06 #HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 #HTML / CSS
浅析HTML5 meta viewport参数
Oct 28 #HTML / CSS
You might like
php读取javascript设置的cookies的代码
2010/04/12 PHP
php定义一个参数带有默认值的函数实例分析
2015/03/16 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
用document.documentElement取代document.body的原因分析
2009/11/12 Javascript
不同浏览器的怪癖小结
2010/07/11 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
JQuery中getJSON的使用方法
2010/12/13 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
2011/06/20 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
动态创建script在IE中缓存js文件时导致编码的解决方法
2014/05/04 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
2017/01/19 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
2017/01/19 Javascript
Javascript中this关键字指向问题的测试与详解
2017/08/11 Javascript
安装vue-cli报错 -4058 的解决方法
2017/10/19 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
python GUI实例学习
2017/11/21 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python之时间和日期使用小结
2019/02/14 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python实现猜拳游戏
2020/03/04 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
利用django创建一个简易的博客网站的示例
2020/09/29 Python
html5 兼容IE6结构的实现代码
2012/05/14 HTML / CSS
软件工程师面试题
2012/06/25 面试题
20年同学聚会邀请函
2014/02/04 职场文书
颁奖典礼主持词
2014/03/25 职场文书
学生请假条格式
2014/04/11 职场文书
2019年公司快递收发管理制度模板
2019/11/20 职场文书
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
2021/04/22 HTML / CSS
Python中的socket网络模块介绍
2022/07/23 Python