html-拖拽释放(Drag and drop) API
前言
本文总结一下html5 新增的元素拖拽功能的使用。
正文
1、H5之前的拖拽功能实现方法
JS 拖 拖 拽 功 能 的 实 现首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行mousemove 里面的具体方法。clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，移动的举例应该是：鼠标移动时候的坐标-鼠标按下去时候的坐标。也就是说定位信息为：鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top等等值。
2、H5的拖拽方法介绍
（1）将元素设置为可以拖动
（2）拖动什么 - ondragstart 和 setData()
（3）放到何处 - ondragover
（4）进行放置 - ondrop
3、使用拖拽实现小功能
<style>
.wrap {
width: 300px;
margin: 0 auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.wrap1 {
width: 100px;
height: 310px;
border: 1px solid red;
}
.wrap1:hover {
box-shadow: 4px 4px 5px 3px #999;
}
.wrap2 {
width: 100px;
height: 310px;
border: 1px solid red;
}
.wrap2:hover {
box-shadow: 4px 4px 5px 3px #999;
}
img {
width: 100px;
height: 100px;
cursor: move;
}
img:hover {
box-shadow: 4px 4px 5px 3px #999;
}
</style>
<body>
<div class="wrap">
<div class="wrap1" ondragover="dragOver(event)" ondrop="drop(event,this)">
<img src="./img/feiji1.png" draggable="true" ondragstart="dragStart(event)" id="drag1" />
<img src="./img/feiji3.png" draggable="true" ondragstart="dragStart(event)" id="drag3" />
</div>
<div id="wrap2" class="wrap2" ondragenter="dragEnter(event)" ondragover="dragOver(event)" ondrop="drop(event,this)">
<img src="./img/feiji2.png" draggable="true" ondragstart="dragStart(event)" id="drag2" />
</div>
</div>
<script>
var dragOffSetY;// 鼠标点击下的位置相对于选择元素的y轴长度
function dragStart(event) {
// 设置拖放的数据类型和值
console.log("event.offsetY", event.offsetY);
dragOffSetY = event.offsetY
event.dataTransfer.setData("Text", event.target.id);
}
function dragOver(event) {
event.preventDefault();
}
function dragEnter(event) { }
function drop(event, thisEle) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
if (thisEle.children.length * 100 - 50 > event.offsetY - dragOffSetY) {
console.log("插入");
// 判断覆盖元素的前半部分
console.log("event.offsetY - dragOffSetY", event.offsetY, dragOffSetY);
var offY = event.offsetY - dragOffSetY// 拖拽元素的起点位置
console.log("拖拽元素的起点位置", offY);
var count = Math.round(offY / 100)// 当前拖拽元素覆盖在的元素为第几个
console.log("当前覆盖元素", thisEle.children[count]);
// 前部分
if (count * 100 + 50 > offY) {
thisEle.insertBefore(document.getElementById(data), thisEle.children[count]);
} else {
thisEle.insertBefore(document.getElementById(data), thisEle.children[count + 1]);
}
} else {
console.log("追加");
event.target.appendChild(document.getElementById(data));
}
}
</script>
运行结果如下：
写在最后
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。
html-拖拽释放(Drag and drop) API的更多相关文章
- （原创）[C#] 一步一步自定义拖拽（Drag&Drop）时的鼠标效果：（一）基本原理及基本实现
一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能. 无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等. 这 ...
- [Unity]背包效果-使用NGUI实现物品的拖拽效果Drag
背包效果-使用NGUI实现物品的拖拽效果Drag 效果实现如图 对象层级关系图 PacketCell - Right 对象作为单元格背景 PacketContainer 对象作为单元格容器 Packe ...
- HTML5原生拖拽/拖放⎡Drag & Drop⎦详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5原生拖拽/拖放(drag & drop)详解
前言 拖放(drap && drop)在我们平时的工作中,经常遇到.它表示:抓取对象以后拖放到另一个位置.目前,它是HTML5标准的一部分.我从几个方面学习并实践这个功能. 拖放的流程 ...
- HTML5拖拽/拖放(drag & drop)详解
H5中拖拽属性: draggable: auto | true | false 拖动事件: - dragstart 在元素开始被拖动时触发 - dragend 在拖动操作完成时触发 - dra ...
- HTML5拖拽功能drag
1.创建拖拽对象 给需要拖拽的元素设置draggable属性,它有三个值: true:元素可以被拖拽:false:元素不能被拖拽:auto: 浏览器自己判断元素是否能被拖拽. 2.处理拖拽事件当我们拖 ...
- D3.js 力导向图的拖拽（drag）与缩放（zoom）
不知道大家会不会跟我一样遇到这样的问题,在之前做的力导向图的基础上加上缩放功能的时候,拖动节点时整体会平移不再是之前酷炫的效果(失去了拉扯的感觉!).天啊,简直不能接受如此丑X的效果.经过不懈的努力终 ...
- 【WPF】鼠标拖拽功能DragOver和Drop
在Winform里面实现拖入功能只要设置控件AllowDrop=true; 然后实现方法 //拖入 private void txtInputPath_DragOver(object sender, ...
- html5拖拽总结
拖拽(Drag 和 drop)是 HTML5 标准的组成部分.拖拽是一种常见的特性,即抓取对象以后拖到另一个位置. Internet Explorer 9.Firefox.Opera 12.Chrom ...
随机推荐
- 腾讯 TKE 厉害了！用 eBPF绕过 conntrack 优化K8s Service，性能提升40%
Kubernetes Service[1] 用于实现集群中业务之间的互相调用和负载均衡,目前社区的实现主要有userspace,iptables和IPVS三种模式.IPVS模式的性能最好,但依然有优化 ...
- 51 Nod 1134 最长递增子序列 （动态规划基础）
原题链接:1134 最长递增子序列 题目分析:长度为 的数列 有多达 个子序列,但我们应用动态规划法仍可以很高效地求出最长递增子序列().这里介绍两种方法. 先考虑用下列变量设计动态规划的算法. ...
- Linuxqq shell脚本安装后的卸载
官方下载和帮助页面: 传送门 linuxqq_2.0.0-b1 的时候,并没有发布 MIPS64 的 DEB 包,只能用 .sh 安装,需要手动删除卸载.愚人节发布的 beta2 新增了 MIPS64 ...
- 问题记录——BigDecimal保留两位小数及格式化成百分比
1.函数总结 BigDecimal.setScale()方法用于格式化小数点 setScale(1)表示保留一位小数,默认用四舍五入方式 setScale(1,BigDecimal.ROUND_DOW ...
- jmeter - 阶梯式性能指标监听
概述 我们在进行阶梯式压力测试的时候,聚合报告生成的结果是一个汇总数据.并不会阶梯式的统计压测性能数据.这样我们就不能去对比不同阶梯压力下的性能数据变化趋势. 期望 假设现在一共会加载100个线程,我 ...
- Heartbeat部署
部署环境:CentOS 7 1.Heartbeat介绍 Heartbeat是Linux-HA项目中的一个组件,它实现了一个高可用集群系统.心跳检测和集群通信是高可用的两个关键组件,在Heartbeat ...
- 如何在 python 中提取图片主题色
前言 在 Groove 音乐中,当我们改变歌曲时,底部播放栏的颜色会随专辑封面而变,比如下图中播放栏的颜色变成了 aiko 衣服的颜色.下面我们会在 python 中实现相同的效果,也就是提取出图片中 ...
- 学习MyBatis必知必会（7）~注解开发、动态SQL
一.MyBatis的注解开发 开发中推荐是使用xml文件配置 1.配置映射关系[使用注解的方式]: <!-- 全局的配置文件 --> <configuration> <! ...
- Java流程控制03：顺序结构
顺序结构 Java的基本结构就是顺序结构,除非特别指明,否则就按照顺序一句一句执行. 顺序结构是最简单的算法结构.从上到下 语句与语句之间,框与框之间是按从上到下的顺序进行的,它是由若干个依次执行的处 ...
- nginx103
user nobody;worker_processes 1;error_log /home/logs/error.log info;#pid logs/nginx.pid;ev ...