New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[html] 第62天 有使用过HTML5的拖放API吗?说说你对它的理解 #275
Labels
html
html
Comments
|
用来做过排序,还要写临时插入,最终放手插入和数据改变。 |
之前用过sortable.js来处理拖拽 |
jquery UI我使用过,提供的api已经差不多够用, 原生的在实现的拖拽的层面能有更大的自由度把 |
直接上例子 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
display: inline-block;
width: 30px;
height: 30px;
background: pink;
}
.container {
width: 200px;
height: 200px;
border: 1px solid rgb(72, 182, 167);
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<div class="container"></div>
<script>
let box = document.querySelector(".box");
let container = document.querySelector(".container");
// 移动元素
box.addEventListener("dragstart", function (e) {
console.log("我要移动了")
e.dataTransfer.setData("box", e.target.className);
})
// 目标元素
container.addEventListener("dragenter", function () {
console.log("你每次进入我这里都会触发");
})
container.addEventListener("dragover", function (e) {
// 要阻止浏览器默认行为,不然触发不了了下面的drop事件
e.preventDefault();
console.log("你每次在我里面都会不停地触发");
})
// drop 要阻止dragover才能触发
container.addEventListener('drop', function (e) {
console.log("在我里面松开鼠标就会触发");
var data = e.dataTransfer.getData("box");
e.target.appendChild(document.getElementsByClassName(data)[0]);
})
container.addEventListener("dragleave", function () {
console.log("你离开我的时候就会触发");
})
</script>
</body>
</html> |
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
第62天 有使用过HTML5的拖放API吗?说说你对它的理解
The text was updated successfully, but these errors were encountered: