前端實(shí)現(xiàn)界面元素拖拽功能的3種方式總結(jié)(親測有效)
一、純HTML+CSS+JS實(shí)現(xiàn);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="draggableDialog"> <div class="dialog-header">彈框標(biāo)題</div> <div class="dialog-content">彈框內(nèi)容</div> </div> </body> <style> #draggableDialog { position: absolute; width: 300px; height: 200px; background-color: #fff; border: 1px solid #ccc; padding: 10px; } .dialog-header { cursor: move; background-color: #f0f0f0; padding: 5px; } </style> <script> const dialog = document.getElementById('draggableDialog'); const dialogHeader = dialog.querySelector('.dialog-header'); let isDragging = false; let offsetX, offsetY; dialogHeader.addEventListener('mousedown', (e) => { isDragging = true; offsetX = e.clientX - dialog.offsetLeft; offsetY = e.clientY - dialog.offsetTop; }); document.addEventListener('mousemove', (e) => { if (isDragging) { dialog.style.left = e.clientX - offsetX + 'px'; dialog.style.top = e.clientY - offsetY + 'px'; } }); document.addEventListener('mouseup', () => { isDragging = false; }); </script> </html>
實(shí)現(xiàn)原理:使用js事件監(jiān)聽,監(jiān)聽document全局DOM的鼠標(biāo)移動(dòng)事件,當(dāng)觸發(fā)事件后,目標(biāo)元素將會(huì)隨鼠標(biāo)一起偏移(移動(dòng))相對(duì)應(yīng)的距離;因目標(biāo)元素并非一直需要跟隨鼠標(biāo)移動(dòng),于是通過給目標(biāo)元素指定區(qū)域
dialogHeader
添加鼠標(biāo)按下事件配合isDragging
控制閥,實(shí)現(xiàn)只有當(dāng)鼠標(biāo)在指定區(qū)域按下才能實(shí)現(xiàn)拖動(dòng)目標(biāo)元素的效果。
二、VUE模板實(shí)現(xiàn);
<template> <div id="draggableDialog" ref="dialog"> <div class="dialog-header" @mousedown="startDrag($event)">彈框標(biāo)題</div> <div class="dialog-content">彈框內(nèi)容</div> </div> </template> <script> export default { data() { return { isDragging: false, offsetX: 0, offsetY: 0 }; }, methods: { startDrag(event) { this.isDragging = true; this.offsetX = event.clientX - this.$refs.dialog.offsetLeft; this.offsetY = event.clientY - this.$refs.dialog.offsetTop; document.addEventListener('mousemove', this.drag); document.addEventListener('mouseup', this.stopDrag); }, drag(event) { if (this.isDragging) { this.$refs.dialog.style.left = event.clientX - this.offsetX + 'px'; this.$refs.dialog.style.top = event.clientY - this.offsetY + 'px'; } }, stopDrag() { this.isDragging = false; document.removeEventListener('mousemove', this.drag); document.removeEventListener('mouseup', this.stopDrag); } } }; </script> <style> #draggableDialog { position: absolute; width: 300px; height: 200px; background-color: #fff; border: 1px solid #ccc; padding: 10px; } .dialog-header { cursor: move; background-color: #f0f0f0; padding: 5px; } </style>
原理同上;
三、VUE全局指令實(shí)現(xiàn);
Vue.directive('drag', { bind(el) { el.onmousedown = function(e) { let disX = e.clientX - el.offsetLeft; let disY = e.clientY - el.offsetTop; document.onmousemove = function(e) { let left = e.clientX - disX; let top = e.clientY - disY; if (left < 0) left = 0; if (top < 0) top = 0; if (left > document.documentElement.clientWidth - el.offsetWidth) left = document.documentElement.clientWidth - el.offsetWidth; if (top > document.documentElement.clientHeight - el.offsetHeight) top = document.documentElement.clientHeight - el.offsetHeight; el.style.left = left + 'px'; el.style.top = top + 'px'; }; document.onmouseup = function() { document.onmousemove = null; document.onmouseup = null; }; }; } });
總結(jié)
到此這篇關(guān)于前端實(shí)現(xiàn)界面元素拖拽功能的3種方式的文章就介紹到這了,更多相關(guān)前端實(shí)現(xiàn)界面元素拖拽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript實(shí)現(xiàn)動(dòng)態(tài)CSS換膚技術(shù)的腳本
javascript實(shí)現(xiàn)動(dòng)態(tài)CSS換膚技術(shù)的腳本...2007-06-06Html5 js實(shí)現(xiàn)手風(fēng)琴效果
這篇文章主要為大家詳細(xì)介紹了Html5 js實(shí)現(xiàn)手風(fēng)琴效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-01-01抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼
抽出www.templatemonster.com的鼠標(biāo)懸停加載大圖模板的代碼...2007-07-07