html5长图拖动(html5 拖拽及用 js 实现拖拽功能的示例代码)
类别:Web前端 浏览量:1798
时间:2021-10-20 08:40:32 html5长图拖动
html5 拖拽及用 js 实现拖拽功能的示例代码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> <li class="box" draggable="true"></li> <li class="box2"></li> <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> <li class="box-b"> <li class="cell-a" draggable="true">1</li> <li class="cell-a" draggable="true">2</li> <li class="cell-a" draggable="true">3</li> <li class="cell-a" draggable="true">4</li> <li class="cell-a" draggable="true">5</li> </li> <p>boxC</p> <li class="box-c"></li> <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> <li id="box"></li> </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('li') 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> <li class="box"></li> <li 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> </li> </body> </html>
效果展示
有时会卡顿,未解决…
到此这篇关于html5 拖拽及用 js 实现拖拽的文章就介绍到这了,更多相关html5 拖拽内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5自动静音(html5录音功能实战示例)
- html5浏览界面怎么设置(HTML5textarea高度自适应的两种方案)
- html5手机字体怎么设置(html5给汉字加拼音加进度条的实现代码)
- html5显示中心代码(HTML5中的Web Notification桌面通知功能的实现方法)
- HTML5中新增的Input类型
- html5怎么设置红色(详解HTML5如何使用可选样式表为网站或应用添加黑暗模式)
- html5 meta标签
- html5的新特性
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- Html5新增的标签
- ih5如何点击按钮跳转至网页(HTML5跳转小程序wx-open-launch-weapp的示例代码)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- html5长按动画效果(HTML5自定义元素播放焦点图动画的实现)
- html5单选项怎么调选项间距(html5实现输入框fixed定位在屏幕最底部兼容性)
- Html5中的<section>标签
- html5菜单栏(html5写一个BUI折叠菜单插件的实现方法)
- 赏读 八月再见,九月你好(赏读八月再见九月你好)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
- 吐槽完《弧光大作战》之后,我们和设计师聊了聊魔兽首款手游的立项初衷和未来(吐槽完弧光大作战之后)
- 魔兽争霸3自定义战役少年杰雷 2(魔兽争霸3自定义战役少年杰雷)
热门推荐
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- css边框和边界教程(css 中多种边框的实现小窍门)
- mybatis批量插入报错(解决myBatis中删除条件的拼接问题)
- docker前端项目(Docker部署Nuxt.js项目的实现)
- SQL中FOR XML PATH
- pyqt左侧菜单栏(pyside+pyqt实现鼠标右键菜单功能)
- python获取excelsheet名称(python查询文件夹下excel的sheet名代码实例)
- python 后台django(Python Django给admin添加Action的方法实例详解)
- linq中group by
- 如何获取html5表单中的元素的值(html5 datalist 选中option选项后的触发事件)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9