html5 拖动及用 js㊑ 完成拖动作用的实例编码

2021-01-21 00:02 jianzhan

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>

实际效果展现

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>

实际效果展现

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; /* Google */
                -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 拖动內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!