时间:2021-05-26
本文实例为大家分享了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>最终效果(拖动的为绿色块)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JS基于面向对象实现的拖拽库。分享给大家供大家参考。具体如下:这是一个面向对象的JS拖拽库,可设置水平锁定、垂直锁定、锁定位置、锁定范围等,设定这
本文实例讲述了JS基于面向对象实现的放烟花效果。分享给大家供大家参考。具体实现方法如下:js放烟花效果(面向对象版)html,body{overflow:hid
本文实例为大家分享了JS面向对象之多选框实现代码,供大家参考,具体内容如下描述:JS面向对象——多选框的实现效果:实现:Utile.js(function(){
本文实例为大家分享了JS面向对象之单选框实现代码,供大家参考,具体内容如下描述:JS面向对象——单选框的实现效果:实现:Utile.js(function(){
本文实例讲述了JS面向对象编程实现的拖拽功能。分享给大家供大家参考,具体如下:原始的面向过程代码:#box{width:100px;height:100px;b