正文

html-拖拽释放(Drag and drop) API

IP云
IP云V管理员/2 阅读
09/25
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

本文总结一下html5 新增的元素拖拽功能的使用。

正文

1、H5之前的拖拽功能实现方法

JS 拖 拖 拽 功 能 的 实 现首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行mousemove 里面的具体方法。clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，移动的举例应该是：鼠标移动时候的坐标-鼠标按下去时候的坐标。也就是说定位信息为：鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft.还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top等等值。

2、H5的拖拽方法介绍

        H5中拖拽属性：draggable： auto | true | false
        拖动事件：
        - dragstart 在元素开始被拖动时触发
        - dragend 在拖动操作完成时触发
        - drag 在元素被拖动时触发
        释放事件：
        - dragenter 被拖动元素进入到释放区所占据得屏幕空间时触发
        - dragover 当被拖动元素在释放区内移动时触发
        - dragleave 当被拖动元素没有放下就离开释放区时触发
        - drop 当被拖动元素在释放区里放下时触发

（1）将元素设置为可以拖动

        draggable="true"

（2）拖动什么 - ondragstart 和 setData()

        ondragstart="drag(event)"设置拖放触发的函数
        event.dataTransfer.setData("Text",event.target.id);设置拖放的数据类型和值，Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。

（3）放到何处 - ondragover

        该时间规定拖动元素放置在何处，默认无法将数据/元素放置在其他元素中，如果需要设置允许放置，必须阻止对元素的默认处理方式ev.preventDefault();

（4）进行放置 - ondrop

        调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
        通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
        被拖数据是被拖元素的 id ("drag1")
        把被拖元素追加到放置元素（目标元素）中

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>

运行结果如下：

写在最后

以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。