html5 拖拽及用 js 实现拖拽功能的示例代码

程序员文章站 2022-03-04 09:50:38

html5 拖拽及用 js 实现拖拽功能的示例代码这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下... 20-10-23...

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>
        <div class="box" draggable="true"></div>
        <div class="box2"></div>
        <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>
        <div class="box-b">
            <div class="cell-a" draggable="true">1</div>
            <div class="cell-a" draggable="true">2</div>
            <div class="cell-a" draggable="true">3</div>
            <div class="cell-a" draggable="true">4</div>
            <div class="cell-a" draggable="true">5</div>
        </div>
        <p>boxc</p>
        <div class="box-c"></div>
        <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>

效果展示

html5 拖拽及用 js 实现拖拽功能的示例代码

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>
        <div id="box"></div>
    </body>
</html>

效果展示

html5 拖拽及用 js 实现拖拽功能的示例代码

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('div')
                        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>
        <div class="box"></div>
        <div 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>
        </div>
    </body>
</html>

效果展示

html5 拖拽及用 js 实现拖拽功能的示例代码

有时会卡顿，未解决…

到此这篇关于html5 拖拽及用 js 实现拖拽的文章就介绍到这了,更多相关html5 拖拽内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

html5 拖拽及用 js 实现拖拽功能的示例代码

1. html5 拖拽

1.1 相关知识

1.2 拖拽基础

1.3 将 a 在 b、c 之间拖拽

2. 用 js 实现拖拽

2.1 js 简单拖拽

2.2 带效果的拖拽

vuejs2.0运用原生js实现简单的拖拽元素功能示例

vue2.0使用Sortable.js实现的拖拽功能示例

Java实现拖拽文件上传dropzone.js的简单使用示例代码

JS基于面向对象实现的拖拽功能示例

JS实现的文件拖拽上传功能示例

JavaScript实现图片的放大缩小及拖拽功能示例

JS实现的简单拖拽功能示例

React 实现拖拽功能的示例代码

react.js组件实现拖拽复制和可排序的示例代码

html5 拖拽及用 js 实现拖拽功能的示例代码