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


Posted in HTML / CSS onOctober 23, 2020

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 拖拽内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
深入浅出CSS3 background-clip,background-origin和border-image教程
Jan 27 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
May 07 HTML / CSS
CSS3实现的文本3D效果附图
Sep 03 HTML / CSS
CSS3属性box-shadow使用指南
Dec 09 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
HTML5中Canvas与SVG的画图原理比较
Jan 16 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 HTML / CSS
分享全球十款超强HTML5开发工具
May 14 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
Aug 09 HTML / CSS
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
Apr 19 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 #HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 #HTML / CSS
使用HTML5做的导航条详细步骤
Oct 19 #HTML / CSS
利用Node实现HTML5离线存储的方法
Oct 16 #HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 #HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 #HTML / CSS
移动端HTML5 input常见问题(小结)
Sep 28 #HTML / CSS
You might like
学习PHP的数组总结【经验】
2016/05/05 PHP
php mysql 封装类实例代码
2016/09/18 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
jquery的颜色选择插件实例代码
2008/10/02 Javascript
JS截取字符串常用方法详细整理
2013/10/28 Javascript
JS控制输入框内字符串长度
2014/05/21 Javascript
javascript检测浏览器的缩放状态实现代码
2014/09/28 Javascript
基于JavaScript实现智能右键菜单
2016/03/02 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
浅谈如何优雅处理JavaScript异步错误
2019/11/12 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
JS如何实现在弹出窗口中加载页面
2020/12/03 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
[46:04]Liquid vs VP Supermajor决赛 BO 第四场 6.10
2018/07/05 DOTA
Python装饰器使用示例及实际应用例子
2015/03/06 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
浅谈CSS3中display属性的Flex布局的方法
2017/08/14 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
2017/09/11 HTML / CSS
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
Laura官网:加拿大女性的顶级时尚目的地
2019/09/20 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
《雷雨》教学反思
2014/02/20 职场文书
便利店促销方案
2014/02/20 职场文书
企业员工薪酬方案
2014/06/04 职场文书
债务授权委托书范本
2014/10/17 职场文书
2015社区个人工作总结范文
2015/05/13 职场文书
大国崛起观后感
2015/06/02 职场文书
MySQL中的引号和反引号的区别与用法详解
2021/10/24 MySQL
MyBatis核心源码深度剖析SQL语句执行过程
2022/05/20 Java/Android