js面向对象方式实现拖拽效果
2021-03-05 04:06
786 查看
本文实例为大家分享了js面向对象方式实现拖拽的具体代码,供大家参考,具体内容如下
拖拽功能的实现原理:(直接拿走!)
<!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 { position: absolute; left: 100px; top: 100px; width: 100px; height: 100px; background: red; } #box2 { position: absolute; left: 200px; top: 200px; width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="box">文字</div> <div id="box2">文字</div> </body> <script> class Drag { startMouse = {}; startEl = {}; #el = null; constructor(el, option) { this.#el = el; this.option = option; this.start(); } start() { let move = (e) => { this.move(e) } this.#el.addEventListener('mousedown', (e) => { this.startMouse = { x: e.clientX, y: e.clientY, } this.ondragstart && this.ondragstart(e) this.startEl = this.getOffset(); document.addEventListener('mousemove', move); document.addEventListener('mouseup', (e) => { document.removeEventListener('mousemove', move); this.end(e); }, { once: true }) e.preventDefault(); }) } move(e) { let nowMouse = { x: e.clientX, y: e.clientY, } let disMouse = { x: nowMouse.x - this.startMouse.x, y: nowMouse.y - this.startMouse.y } this.ondrag && this.ondrag(e) this.setOffset(disMouse) } end(e) { this.ondragend && this.ondragend(e) } getOffset() { return { x: parseFloat(getComputedStyle(this.#el)["left"]), y: parseFloat(getComputedStyle(this.#el)["top"]) } } setOffset(dis) { this.#el.style.left = this.startEl.x + dis.x + 'px' this.#el.style.top = this.startEl.y + dis.y + 'px' } } let box = document.querySelector("#box"); let box2 = document.querySelector("#box2"); let d = new Drag(box); let d2 = new Drag(box2); let clonex = null; d2.ondragstart = (e) => { clonex = box2.cloneNode(true); document.body.appendChild(clonex) box2.style.opacity = 0.5 } d2.ondragend = () => { document.body.removeChild(clonex); box2.style.opacity = 1 } </script> </html>
最终效果(拖动的为绿色块)
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:相关文章推荐
- 用JS中的面向对象思维实现放大镜效果
- 轮播图原生js实现和jquery实现和js面向对象方式实现
- 三种方式实现banner图的轮播(jq实现淡入淡出、jq实现层级轮播、js面向对象实现无缝轮播)
- Js实现拖拽 --面向对象封装( 超详细中文注释)
- js面向对象实例(实现简易版拖拽)
- js面向对象实现元素拖拽
- js开发:通过面向对象方式完成的拖拽功能
- 分别用普通过程,面向对象过程,和继承方法实现拖拽效果
- SAPUI5 - JS面向对象继承方式的实现
- J2ME中面向对象方式实现数据管理(RMS)
- 使用MVC中的HtmlHelper对象的ActionLink方法,实现一个Javascript:void(0)效果,去调用一个JS方法
- Javascript 类与静态类的实现-js面向对象
- js 面向对象实现多个“倒计时器”
- 原生js实现拖拽弹框的效果
- JS面向对象组件(六) -- 拖拽功能以及组件的延展
- 混合对象 "类" ---js实现继承的两种方式
- (转载)JS面向对象实现
- 用js实现动画效果核心方式
- 使用js实现的简单拖拽效果
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)