html5 拖拽及用 js 实现拖拽功能的示例代码
程序员文章站
2022-06-25 19:40:41
html5 拖拽及用 js 实现拖拽功能的示例代码这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下... 20-10-23...
1. html5 拖拽
1.1 相关知识
拖拽元素：可以为元素添加 draggable="true"来让元素能够被拖拽。
拖拽元素的事件监听：（应用于拖拽元素）
-
ondragstart当拖拽开始时调用 -
ondragleave当鼠标离开拖拽元素时调用 -
ondragend当拖拽结束时调用 -
ondrag整个拖拽过程都会调用
目标元素：把元素a拖拽到元素b里，那么元素b就是目标元素。页面中任何一个元素都可以成为目标元素。
目标元素的事件监听：（应用于目标元素）
-
ondragenter当拖拽元素进入时调用 -
ondragover当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态） -
ondrop当在目标元素上松开鼠标时调用 -
ondragleave当鼠标离开目标元素时调用
如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventdefault()这一行代码。
1.2 拖拽基础
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
<style>
.box {
width: 200px;
height: 200px;
background: green;
}
.box2 {
position: relative;
left: 300px;
top: 50px;
width: 300px;
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<div class="box2"></div>
<script>
// html5 拖拽
// 应用于拖拽元素
var box = document.queryselector('.box')
box.ondragstart = function () {
console.log('拖拽开始')
}
box.ondragleave = function () {
console.log('鼠标离开元素')
}
box.ondragend = function () {
console.log('拖拽结束')
}
// box.ondrag = function () {
// console.log('在拖拽');
// }
// 应用于目标元素（想把 box 拖拽进去的地方）
var box2 = document.queryselector('.box2')
box2.ondragenter = function () {
console.log('进来了')
}
box2.ondragleave = function () {
console.log('离开了')
}
// 当拖拽元素在 目标元素上时，连续触发
box2.ondragover = function (e) {
// 如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventdefault()这一行代码。
e.preventdefault()
console.log('over')
}
box2.ondrop = function () {
console.log('松开鼠标了')
}
</script>
</body>
</html>
1.3 将 a 在 b、c 之间拖拽
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
<style>
.box-b {
width: 250px;
height: 250px;
background: green;
}
.cell-a {
float: left;
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
line-height: 50px;
border-radius: 50%;
background: red;
}
.box-c {
width: 200px;
height: 200px;
margin-top: 10px;
background: skyblue;
}
</style>
</head>
<body>
<p>boxb</p>
<div class="box-b">
<div class="cell-a" draggable="true">1</div>
<div class="cell-a" draggable="true">2</div>
<div class="cell-a" draggable="true">3</div>
<div class="cell-a" draggable="true">4</div>
<div class="cell-a" draggable="true">5</div>
</div>
<p>boxc</p>
<div class="box-c"></div>
<script>
var cella = document.queryselectorall('.cell-a')
var boxb = document.queryselector('.box-b')
var boxc = document.queryselector('.box-c')
var temp = null
cella.foreach((cell, index) => {
// 从 boxb 拖拽到 boxc
cell.ondragstart = function () {
// 保持当前拖拽的元素
temp = this
}
cell.ondragend = function () {
temp = null
}
boxc.ondragover = function (e) {
e.preventdefault()
}
boxc.ondragenter = function () {
this.appendchild(temp)
}
// 从 boxc 拖拽到 boxb
boxb.ondragover = function (e) {
e.preventdefault()
}
boxb.ondragenter = function () {
this.appendchild(temp)
}
})
</script>
</body>
</html>
效果展示
2. 用 js 实现拖拽
2.1 js 简单拖拽
按下鼠标进行简单的拖拽。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
<style>
#box {
position: absolute;
width: 200px;
height: 200px;
background: green;
}
</style>
<script>
window.onload = function () {
var box = document.getelementbyid('box')
var disx = 0
var disy = 0
box.onmousedown = function (e) {
var e = e || window.event
disx = e.clientx - this.offsetleft
disy = e.clienty - this.offsettop
box.onmousemove = function (e) {
var e = e || window.event
box.style.left = e.clientx - disx + 'px'
box.style.top = e.clienty - disy + 'px'
}
box.onmouseup = function (e) {
console.log('end')
this.onmousemove = null
}
return false
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
效果展示
2.2 带效果的拖拽
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>document</title>
<style>
.box {
position: absolute;
width: 200px;
height: 200px;
background: skyblue;
}
.box1 {
position: absolute;
border: 1px dashed black;
opacity: 0.5;
}
.way-box {
position: absolute;
bottom: 30px;
right: 30px;
/* 无法选中 */
-moz-user-select: none; /* 火狐 */
-webkit-user-select: none; /* 谷歌 */
-ms-user-select: none; /* ie */
user-select: none;
}
</style>
<script>
window.onload = function () {
;(function () {
var box = document.queryselector('.box')
var disx, disy, temp
var body = document.queryselector('body')
var way1 = document.queryselector('#way1')
var way2 = document.queryselector('#way2')
box.onmousedown = function (e) {
var e = e || window.event // 兼容性写法
disx = e.clientx - this.offsetleft
disy = e.clienty - this.offsettop
temp = document.createelement('div')
body.appendchild(temp)
temp.classlist.add('box')
temp.classlist.add('box1')
// 移动后位置会变，temp 的位置应该与 box 位置重合
temp.style.left = e.clientx - disx + 'px' // 记得加单位！
temp.style.top = e.clienty - disy + 'px'
temp.onmousemove = function (e) {
var e = e || window.event
temp.style.left = e.clientx - disx + 'px' // 记得加单位！
temp.style.top = e.clienty - disy + 'px'
}
temp.onmouseup = function (e) {
console.log('end')
this.onmousemove = null
// 1 则默认不发生实际移动
if (way2.checked) {
box.style.left = e.clientx - disx + 'px'
box.style.top = e.clienty - disy + 'px'
}
temp.style.display = 'none'
this.onmouseup = null
}
}
})()
}
</script>
</head>
<body>
<div class="box"></div>
<div class="way-box">
<p>请选择拖拽的方式</p>
<input type="radio" id="way1" name="way" checked />
<label for="way1">1</label>
<input type="radio" id="way2" name="way" />
<label for="way2">2</label>
</div>
</body>
</html>
效果展示
有时会卡顿，未解决…
到此这篇关于html5 拖拽及用 js 实现拖拽的文章就介绍到这了,更多相关html5 拖拽内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！