HTML5拖拽接口(上)

最新推荐文章于 2023-10-14 12:41:19 发布

Wxh971220

最新推荐文章于 2023-10-14 12:41:19 发布

阅读量705

点赞数

分类专栏： HTML5 JavaScript 文章标签： HTML5 JavaScript

本文链接：https://blog.csdn.net/qq_35314120/article/details/80633847

版权

HTML5 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

JavaScript

1 篇文章 0 订阅

订阅专栏

HTML5拖放接口(上)

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

这篇文章简单介绍一下拖拽的几个事件;

下一篇介绍具体使用

首页搭建了一demo.html

<body>
    <div class="box b-g b2">
        <div class="item" draggable="true">
            <span>拖拽我</span>
        </div><!--  -->
    </div>
    <div class="box b-p b2">
    </div>
</body>

demo.css

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    transition: transform 300ms;
}

.box {
    float: left;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .3);
    width: 150px;
    height: 150px;
    margin: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}
.green {
    background-color: green;
}

.pink {
    background-color: pink;
}

.red {
    background-color: red;
}

.b-g {
    border-style: solid;
    border-color: green;
}

.b-r {
    border-style: solid;
    border-color: red;
}

.b-p {
    border-style: solid;
    border-color: pink;
}

.b1 {
    border-width: 1px;
}

.b2 {
    border-width: 3px;
}

.b3 {
    border-width: 5px;
}
.item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40%;
    height: 40%;
    border: 1px solid rgba(0, 0, 0, .3);
    background-color: #eee;
    background-image: url(http://wxhboy.com/img/n.jpg);
    background-size: 100%;
}
.item:hover {
    transform: translateY(-3px);
    font-weight: bold;
}
span {
    color: red;
    font-size: 14px;
}

我用错误输出代表被拖拽元素,警告表示拖拽目标元素

被拖拽元素事件:

1. ondrag 整个拖拽过程都会调用
2. ondragstart 当拖拽开始时调用
3. ondragleave 当鼠标离开拖拽元素时调用
4. ondragend 当拖拽结束时调用

//获取第一个item
let firstItem = document.querySelector('.item');
firstItem.ondrag = (e) => {
    //整个拖拽过程都会调用
    console.error('被拖拽元素:ondrag|整个拖拽过程都会调用');
}
firstItem.ondragstart = (e) => {
    //当拖拽开始时调用
    console.error('被拖拽元素:ondragstart|当拖拽开始时调用');
    //火狐浏览器需要添加这句设置数据代码(可以为null 但是必须填写)
    e.dataTransfer.setData("(非空字符串)",null);
}
firstItem.ondragleave = (e) => {
    //当鼠标离开拖拽元素时调用
    console.error('被拖拽元素:ondragleave|当鼠标离开拖拽元素时调用');
}
firstItem.ondragend = (e) => {
    //当拖拽结束时调用
    console.error('被拖拽元素:ondragend|当拖拽结束时调用');
}

拖拽目标元素事件:

1. ondragenter 当拖拽元素进入时调用
2. ondragover 当停留再目标元素上时调用
3. ondrop 当在目标元素上松开鼠标时候调用

4. ondragleave 当鼠标离开元素目标时调用

//获取目标元素
let box = document.querySelectorAll('.box')[1];
box.ondragenter = (e) => {
    //当拖拽元素进入时调用
    console.warn('目标元素:ondragenter|当拖拽元素进入时调用');
}
box.ondragover = (e) => {
    //当停留再目标元素上时调用
    console.warn('目标元素:ondragover|当停留再目标元素上时调用');
    // 如果想触发ondrop事件,这里需要阻止浏览器默认行为
    e.preventDefault();
}
// 注意这里浏览器会阻止ondrop事件
// 我们必须找ondragover事件中阻止浏览器默认行为
box.ondrop = (e) => {
    //当在目标元素上松开鼠标时候调用
    console.warn('目标元素:ondrop|当在目标元素上松开鼠标时候调用')
}
box.ondragleave = (e) => {
    //当鼠标离开元素目标时调用
    console.warn('目标元素:ondragleave|当鼠标离开元素目标时调用')
}

最后预览:

Wxh971220

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖拽接口(上)

HTML5拖放接口(上)拖放是一种常见的特性，即抓取对象以后拖到另一个位置。在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。这篇文章简单介绍一下拖拽的几个事件;下一篇介绍具体使用首页搭建了一demo.htm...
复制链接

扫一扫