1.在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。
拖动事件：dragstart、drag、dragend
放置事件：dragenter、dragover、drop
拖拽事件流：当拖动一个元素放置到目标元素上的时候将会按照如下顺序依次触发dragstart->drag->dragenter->dragover->drop->dragend
2.在拖拽事件中，我们可以通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData
案例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent {
height: 200px;
border: 1px solid cyan;
margin: 0 auto;
}
.child {
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
margin: 10px;
}
body {
height: 400px;
}
</style>
<script>
window.onload = function () {
var parent = document.querySelector('.parent');
var childs = document.querySelectorAll('.child');
childs = Array.from(childs);
// console.log(childs);
childs.forEach(function (item) {
//拖放对象
//拖放事件
//开始拖放
item.ondragstart = function (event) {
// console.log('ondragstart');
//console.log(event.dataTransfer);
event.dataTransfer.setData('id', item.id);
};
//正在拖放的事件
item.ondrag = function () {
// console.log('ondrag');
}
//拖放结束
item.ondragend = function () {
// console.log('ondragend');
}
})
//放置对象事件
//将拖放元素 拖放放置 对象中
// 进入目标元素
parent.ondragenter = function (event) {
}
// 在目标元素内活动
parent.ondragover = function () {
//取消事件默认行为
event.preventDefault();
}
// 将拖放元素放置到目标元素内
parent.ondrop = function (event) {
// console.log('ondrop');
var id = event.dataTransfer.getData('id');
// id='one'
var dom = document.querySelector('#' + id);
this.appendChild(dom);
event.stopPropagation();
}
document.body.ondragover = function (event) {
event.preventDefault();
}
document.body.ondrop = function (event) {
var id = event.dataTransfer.getData('id');
var dom = document.querySelector('#' + id);
this.appendChild(dom);
}
}
</script>
</head>
<body>
<div class="parent">
</div>
<div class="child" draggable="true" id="one">1</div>
<div class="child" draggable="true" id="two">2</div>
<div class="child" draggable="true" id='three'>3</div>
<div class="child" draggable="true" id='four'>4</div>
</body>
</html>
效果：往parent 拖放
往body拖放：
案例2
目前实现的效果比较简单，左边的组件，拖动右边目前是接在容器的后面，然后容器内可以自由拖动，不过只能从后面排回来。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.box {
width: 100%;
height: 100%;
padding-top: 100px;
display: flex;
}
.list {
width: 20%;
height: 500px;
margin-left: 20px;
background: #aaaa7f;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.content {
width: 20%;
margin-left: 100px;
height: 500px;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
background: #ffaaff;
}
.square,.round,.triangles,.balls {
width: 50px;
height: 50px;
}
.square {
background-color: yellow;
}
.round,.balls {
border-radius: 50%;
}
.round {
background-color: green;
}
.balls {
background: radial-gradient(circle at 100px 100px, #5cabff, #000);
}
.triangles {
width: 0px;
height: 0px;
border-bottom: 50px solid aqua;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<!-- 待拖拽列表 -->
<div class="box">
组件
<div class="list">
<!-- draggable="true" 让目标可以拖拽 -->
<div class="square child" draggable="true" id="square"></div>
<div class="round child" draggable="true" id="round"></div>
<div class="triangles child" draggable="true" id="triangles"></div>
<div class="balls child" draggable="true" id="balls"></div>
</div>
<!-- 目标容器 -->
<div id="content" class="content">
</div>
</div>
<script type="text/javascript">
window.onload = function () {
child()
let count = 0;
// ============= 以下是拖拽到容器区域的事件 ============
content.ondragenter = function (e) {
console.log("检测到目标进入容器", e);
}
content.ondragover = function (e) {
// console.log("目标在容器上移动！",e);
// 阻止默认事件，否则ondrop会失效
e.preventDefault();
}
// 目标离开容器的事件
content.ondragleave = function (e) {
console.log("拖目标离开容器", e);
}
content.ondrop = function (e) {
count++;
console.log(e.dataTransfer.getData("id"));
console.log("目标在容器区域释放", e.dataTransfer.getData("id"));
// cloneNode(true)为深克隆节点，创建一个新的节点放到容器里面，这样才不会影响源节点
let dom = document.getElementById(e.dataTransfer.getData("id"))
let node = dom
//进行一个容器的判断，如果在组件列表需要拷贝。
if (dom.parentNode.className === 'list') {
node = dom.cloneNode(true);
node.setAttribute("id", 'new' + count);
}
console.log(node);
// 这是释放之后对应的容器的信息，我们总要拿到一个容器放目标组件
this.appendChild(node)
child()
}
//封装孩子节点的
function child() {
let content = document.getElementById("content");
let childs = document.querySelectorAll('.child');
childs = Array.from(childs);
// console.log(childs);
childs.forEach(function (item) {
//拖放对象
//拖放事件
//开始拖放
item.ondragstart = function (event) {
// console.log('ondragstart');
//console.log(event.dataTransfer);
event.dataTransfer.setData('id', item.id);
};
//正在拖放的事件
item.ondrag = function () {
console.log('ondrag');
}
//拖放结束
item.ondragend = function () {
// console.log('ondragend');
}
})
}
}
</script>
</body>
</html>
这就是原生态h5基本拖拽技术的实现。
更多的可以看看
MDN
版权声明：本文为nihaio25原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。