网站建设   网站建设技术   网页设计   html/css  

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

人浏览  发布时间:2021-01-29

这篇文章主要介绍了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 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://www.jb51.net/article/154105.htm
https://www.runoob.com/try/try.php?filename=tryhtml5_draganddrop2
 
到此这篇关于Html5原生拖拽相关事件简介以及基础实现的文章就介绍到这了
(编辑:360度神搜网)

备注:本网站资料免费下载浏览,为百度空间下载资料,需用户注册有百度账号,登陆后才可浏览下载,如有疑问联系我们免费解答。


你可能喜欢的:

友情链接
24小时服务电话:13992352808 地址:陕西省西安市,长乐西路180号 WebDesign ©2012 Corporation 360°神搜网网络科技传媒技术服务工作室 网站地图