前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端拾零02—H5原生拖放总结 【原创】

前端拾零02—H5原生拖放总结 【原创】

作者头像
CS逍遥剑仙
发布2018-09-26 15:09:38
1.9K0
发布2018-09-26 15:09:38
举报
文章被收录于专栏:禅林阆苑

前端拾零02—H5原生拖放总结

目录导航

Write By CS逍遥剑仙 我的主页: www.csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com QQ: 1724338257

前端拾零收录日常开发中一些很常见很基础的前端操作,省去每次google甚至答案错误的烦恼

github源码地址

1. 拖放总览

前端拖放,无非通过两种方式:1、js鼠标事件监听,动态改变坐标位置;2、H5原生api。随着H5的普及,推荐使用相对简单的H5原生api实现拖放功能。

H5拖放分为两部分:拖放元素和目标元素,分别有不同的属性和监听事件

2. 拖放元素

2.1 拖放元素属性

  • draggable: 设置元素可被拖放

2.2 拖放元素监听事件

  • ondragstart: 拖放开始时触发事件,作用于拖放元素
  • ondrag: 拖放期间连续触发事件,作用于拖放元素
  • ondragend: 拖放完成时触发事件,作用于拖放元素

2.3 demo

代码语言:javascript
复制
<img id="dragData" width="100" title="拖放对象" src="http://www.csxiaoyao.com/src/img/logo.png" draggable="true" ondragstart="dragstart(event)" ondrag="drag(event)" ondragend="dragend(event)"/>

js事件实现

代码语言:javascript
复制
function dragstart(event) {
    var dt = event.dataTransfer;
    // dt.effectAllowed = 'none'; // 不允许拖拽
    // 拖放的数据类型和值
    dt.setData("csxiaoyaoData", event.target.id);
    console.log("ondragstart 拖动开始");
}
function drag(event) {
    console.log("ondrag持续拖动");
}
function dragend(event) {
    console.log("ondragend 拖放停止");
}

3. 目标元素

3.1 目标元素监听事件

  • ondragenter: 拖放元素进入目标元素时触发事件,作用于目标元素
  • ondragover: 拖放元素在目标元素上移动时触发事件,作用于目标元素
  • ondrop: 拖放元素在目标元素上放置时触发事件,作用于目标元素
  • ondragleave: 拖放元素离开目标元素时触发事件,作用于目标元素

3.2 demo

代码语言:javascript
复制
<div id="div1" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)">
    <p>div1</p>
</div>
<div id="div2" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)">
    <p>div2</p>
</div>

js事件实现

代码语言:javascript
复制
function dragenter(event) {
    event.preventDefault();
    console.log("ondragenter 进入目标区");
}
function dragover(event) {
    event.preventDefault();
    console.log("ondragover 正在目标中移动");
}
function drop(event) {
    event.preventDefault();
    // 阻止冒泡,解决foxfire下弹出新窗口
    event.stopPropagation();
    // 保存在dataTransfer对象中的数据只能在drop事件处理程序中读取
    var dt = event.dataTransfer;
    var data = dt.getData("csxiaoyaoData");
    event.target.appendChild(document.getElementById(data).cloneNode());
    console.log("ondrop 拖放成功");
}
function dragleave(event) {
    console.log("ondragleave 离开目标区");
}

4. Event.preventDefault()

Event.preventDefault(): 阻止默认事件方法执行,ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件覆盖

5. Event.dataTransfer

Event.dataTransfer: 拖放对象数据传递媒介,保存在dataTransfer对象中的数据只能在drop事件处理程序中读取

Event.dataTransfer.dropEffect: 指定拖放视觉效果,只有搭配effectAllowed属性才会生效,在dragenter中设置

(1) none: 不能拖放(除文本框外所有元素的默认值)

(2) move: 移动拖放元素

(3) copy: 复制拖放元素

(4) link: 放置目标自动打开拖动元素(拖放元素必须是有URL的链接)

Event.dataTransfer.effectAllowed: 指定目标元素允许的视觉效果,必须在dragstart事件处理程序中设置

(1) uninitialized: 不指定

(2) none: 不允许所有行为

(3) copy: 只允许值为”copy”的dropEffect

(4) link: 只允许值为”link”的dropEffect

(5) move: 只允许值为”move”的dropEffect

(6) copyLink: 只允许值为”copy”和”link”的dropEffect

(7) copyMove: 只允许值为”copy”和”move”的dropEffect

(8) linkMove: 只允许值为”link”和”move”的dropEffect

(9) all: 允许任意dropEffect

【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » 前端拾零02—H5原生拖放总结 【原创】

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018-08-28分,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前端拾零02—H5原生拖放总结
    • 目录导航
      • 1. 拖放总览
        • 2. 拖放元素
          • 2.1 拖放元素属性
          • 2.2 拖放元素监听事件
          • 2.3 demo
        • 3. 目标元素
          • 3.1 目标元素监听事件
          • 3.2 demo
        • 4. Event.preventDefault()
          • 5. Event.dataTransfer
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档