实现元素拖拽改变位置
2023-01-30

本项目已在 Github 开源(ele-drag)。

预览地址:https://oyps.github.io/ele-drag/

使用方法

  1. 使用 <script src="script.js"> 导入库文件(CDN 地址
  2. 增加拖拽功能,.move 是需要拖拽的元素

    const ele = document.querySelector('.move')
    new EleDrag(ele, window, true)
  3. 说明:需要为被拖拽元素设置宽度,否则元素移动到最右边时,页面可能出现水平滚动条

构造方法

/**
 * @param target 被拖拽元素
 * @param view 被拖拽元素在容器中移动
 * @param limitOut 是否禁止元素超出容器
 */
constructor(
    target: HTMLElement,
    view: HTMLElement | Window = window,
    limitOut: boolean = true
)

库文件代码(TS)

/**
 * 拖拽移动元素
 * @author 欧阳鹏
 * @version 1.0.2
 * @link https://apee.top
 */
class EleDrag implements IConfig {
    target: HTMLElement
    view?: HTMLElement | Window
    limitOut?: boolean
    /** 被拖拽元素起始左边距 */
    startOffsetLeft: number
    /** 被拖拽元素起始顶边距 */
    startOffsetTop: number
    /** 鼠标起始 X 值 */
    startMouseX: number
    /** 鼠标起始 Y 值 */
    startMouseY: number
    /** 鼠标是否在被拖拽元素按下 */
    isMouseDown: boolean
    /**
     * @param target 被拖拽元素
     * @param view 被拖拽元素在容器中移动
     * @param limitOut 是否禁止元素超出容器
     */
    constructor(
        target: HTMLElement,
        view: HTMLElement | Window = window,
        limitOut: boolean = true
    ) {
        this.view = (view || window) as HTMLElement
        this.target = target
        this.limitOut = limitOut
        this.target.style.position = 'absolute'
        this.target.style.left = this.target.offsetLeft + 'px'
        this.target.style.top = this.target.offsetTop + 'px'
        this.target.style.margin = '0'
        this.target.style.userSelect = 'none'
        this.target.addEventListener('mousedown', (event) => {
            this.startOffsetLeft = this.target.offsetLeft
            this.startOffsetTop = this.target.offsetTop
            this.startMouseX = event.pageX
            this.startMouseY = event.pageY
            this.isMouseDown = true
        })
        this.view.addEventListener('mouseup', (event) => {
            this.isMouseDown = false
        })
        this.view.addEventListener('mousemove', (event) => {
            if (this.isMouseDown) {
                this.target.style.left = this.startOffsetLeft - this.startMouseX + event.clientX + 'px'
                this.target.style.top = this.startOffsetTop - this.startMouseY + event.clientY + 'px'
                if (this.limitOut) {
                    this.limitMoveOut()
                }
            }
        })
        this.view.addEventListener('resize', (event) => {
            if (this.limitOut) {
                this.limitMoveOut()
            }
        })
    }
    /** 禁止元素超出容器 */
    limitMoveOut() {
        if (this.target.offsetLeft < 1) {
            this.target.style.left = '1px'
        }
        if (this.target.offsetTop < 1) {
            this.target.style.top = '1px'
        }
        let maxLeft: number, maxTop: number
        if ((this.view as HTMLElement).tagName) {
            maxLeft = (this.view as HTMLElement).offsetWidth - this.target.offsetWidth - 1
            maxTop = (this.view as HTMLElement).offsetHeight - this.target.offsetHeight - 1
        } else {
            maxLeft = window.innerWidth - this.target.offsetWidth - 1
            maxTop = window.innerHeight - this.target.offsetHeight - 1
        }
        if (this.target.offsetLeft > maxLeft) {
            this.target.style.left = maxLeft + 'px'
        }
        if (this.target.offsetTop > maxTop) {
            this.target.style.top = maxTop + 'px'
        }
    }
}

/** 配置 */
interface IConfig {
    /** 被拖拽元素 */
    target: HTMLElement,
    /** 被拖拽元素在容器中移动 */
    view?: HTMLElement | Window,
    /** 是否禁止元素超出容器 */
    limitOut?: boolean
}

示例

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素拖拽修改位置</title>
    <style>
        .move {
            font-size: 30px;
            width: 300px;
            padding: 20px 0;
        }
    </style>
</head>

<body>
    <button class="move">拖拽我看看</button>
    <script src="./index.js"></script>
    <script>
        const ele = document.querySelector('.move')
        new EleDrag(ele, window, true)
    </script>
</body>

</html>
标签:HTMLCSSJavaScript

已有 10 条评论

  1. 叼茂SEO.bfbikes.com

  2. 不错不错,我喜欢看 https://www.237fa.com/

  3. 想想你的文章写的特别好www.jiwenlaw.com

  4. 哈哈哈,写的太好了https://www.cscnn.com/

  5. 兄弟写的非常好 https://www.cscnn.com/

  6. 你的文章让我感受到了快乐,每天都要来看一看。http://www.chongqingqianqin.com

  7. 你的才华横溢,让人敬佩。http://www.tianyejianongchang.com

  8. 《笑傲神探》喜剧片高清在线免费观看:https://www.jgz518.com/xingkong/95319.html

  9. 你的才华让人瞩目,期待你的更多文章。 http://www.55baobei.com/7Rwp1arpKD.html

  10. 每次看到你的文章,我都觉得时间过得好快。 https://www.yonboz.com/video/41206.html

添加新评论