html5 h5 draggable的理解,及其实现拖拽功能

简介: 事件是由行为触发的,但是一个行为不止可以触发一个事件,可以触发多个事件

dragable:

默认值为false,可以用于拖拽,但是一个虚拟的。a标签,img标签默认自带拖拽,(只有chrome,safari可以使用,

firefox不支持,ie不支持),

所有的标签元素,当拖拽周期结束后,默认事件就是回到原处,

事件是由行为触发的,但是一个行为不止可以触发一个事件,可以触发多个事件


拖拽周期: 拖拽开始,拖拽进行中,拖拽结束


拖拽的组成: 被拖拽的物体, 目标区域


被拖拽的物体:事件:ondragstart:拖拽开始事件, 拖拽开始需要移动一点才会触发,鼠标按下不会触发,e.dataTransfer,effectAllowed = ‘link’,还可以填写all, move, copy,linkMove

拖拽进去目标区域鼠标的样式


ondrag: 移动触发的事件


ondragend: 拖拽结束事件,松手触发


            目标区域:接受拖拽的物体,事件:ondragenter: 不是元素图形进入触发,而是鼠标进去才能触发
                                 ondragover: 拖拽物体在目标区域移动不停的触发
                                 ondragleave: 鼠标带着物体离开目标区域触发
                                 ondrop: 在ondragover里面加上e.prevenDefault(),阻止默认事件,就可以触发该事件,


e.dataTransfer.dropEffect = ‘link’,还可以填写all, move, copy,linkMove

设置拖拽放下的属性


实现一个小功能,使用拖拽,实现从左边拖拽到右边,然后从右边拖拽到左边,效果如下:


20200516102200140.png

202005161022209.png


源码如下:

css


```css
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    :root,
    html,
    body {
        height: 100%;
        width: 100%;
    }
    .wrapper {
        width: 500px;
        height: 300px;
        margin: 50px auto;
        border: 1px solid #aaa;
        display: flex;
        justify-content: space-between;
        align-content: center;
    }
    .wrapper .left {
        width: 200px;
        height: 100%;
        border: 1px solid #bbb;
    }
    .wrapper .left ul {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
    li {
        height: 50px;
        margin: 20px;
        background-color: #abcdef;
    }
    .wrapper .right {
        width: 200px;
        height: 100%;
        border: 1px solid #bbb;
    }
    .wrapper .right ul {
        width: 100%;
        height: 100%;
        display: inline-block;
    }
</style>
结构如下:
  <!-- 结构 -->
  <div class="wrapper">
        <div class="left">
            <ul>
                <!-- draggable 为true标志着 元素可以为拖拽元素 -->
                <li draggable="true">1</li>
                <li draggable="true">2</li>
                <li draggable="true">3</li>
            </ul>
        </div>
        <div class="right">
            <ul></ul>
        </div>
    </div>
js如下:
<!-- js -->
```javascript
  (function () {
        var lis = document.getElementsByTagName('li');
        var rightDom = document.getElementsByClassName('right')[0].getElementsByTagName('ul')[0];
        var dragDom;
        // 每一个元素拖拽的时候
        for (let key in lis) {
            if (lis.hasOwnProperty(key)) {
                const li = lis[key];
                li.ondragstart = function (e) {
                    dragDom = e.target;
                }
            }
        }
        // 拖拽的目标区域阻止默认事件
        rightDom.ondragover = function (e) {
            e.preventDefault();
        }
        // 拖拽放下的时候,默认触发ondragover, 所以要阻止默认和时间
        rightDom.ondrop = function () {
            rightDom.appendChild(dragDom);
            dragDom = null;
        }
        // 让元素可以从右边拖拽到左边
        var leftDom = document.getElementsByClassName('left')[0].getElementsByTagName('ul')[0];
        leftDom.ondragover = function (e) {
            e.preventDefault();
        }
        leftDom.ondrop = function () {
            leftDom.appendChild(dragDom);
            dragDom = null;
        }
    })()


相关文章
|
29天前
html页面点击按钮实现页面跳转功能
html页面点击按钮实现页面跳转
51 11
|
2月前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中,`&lt;form&gt;`元素具备自动完成功能,可根据用户历史输入提供建议,提高输入效率并改善体验。默认情况下,浏览器会自动开启此功能,也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段,如`&lt;input&gt;`,同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入,在用户再次访问相同表单时提供相应的自动完成建议。
WK
|
3月前
|
存储 移动开发 API
哪些功能是HTML5的新增功能
HTML5作为HTML的最新版本,引入了许多新的功能和特性,这些功能极大地丰富了网页的表现力和交互性。以下是HTML5的一些新增功能:
WK
69 2
|
3月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
本文介绍了Twaver HTML5中Data类的其他功能函数,如获取和操作子网元的方法,以及组(Group)的概念和使用。文章通过示例代码展示了如何在React组件中创建组、添加图元到组中,并通过toChildren函数获取满足特定条件的图元。
40 0
Twaver-HTML5基础学习(3)基本数据元素(Data)其他功能函数以及组Group
|
2月前
|
小程序 数据可视化 开发工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
HTML我帮您打造拖拽可视化的WEUI小程序工具
33 0
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
用html+javascript打造公文一键排版系统14:为半角和全角字符相互转换功能增加英文字母、阿拉伯数字、标点符号、空格选项
|
3月前
|
存储 文字识别 前端开发
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
用html+javascript打造公文一键排版系统13:增加半角字符和全角字符的相互转换功能
|
3月前
|
前端开发
html遮罩功能
html遮罩功能
|
5月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
5月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
223 0