HTML5高级之拖拽drag

最新推荐文章于 2024-04-20 11:06:33 发布

猫爷001

最新推荐文章于 2024-04-20 11:06:33 发布

阅读量1k

点赞数 1

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

本文链接：https://blog.csdn.net/maoye198602102339/article/details/82992641

版权

Web拖放

--在桌面应用程序上，可以将元素从一个位置拖放到另外一个位置，但在web上，没有一种能够实现这种操作的标准技术，从而在web上去实现这个功能并不容易

--在HTML5标准引入了拖放API，从而使我们有可能开发出与桌面应用程序完全相同的web应用程序

一，源元素事件

执行以下方法，需要先阻止默认行为 e.preventDefault()

--在拖放API中引入了一些新的事件，其中有一些元素是由源元素（拖动的元素）触发，称之为源元素事件，另外一些事件由目标元素触发（源元素投放的元素）

源元素事件：

----------dragstart 当拖动操作开始，触发这个事件

----------drag 与mousemove事件相似，它是在源元素发生拖动时触发的

----------dragend 当拖动操作结束（无论是否成功），源元素触发这个事件

简单的示例（绑定这三个事件）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d_rect{width: 400px;height: 400px;border: 1px solid red;}
        #d_show{width: 400px;height: 100px;border: 1px solid red;}
    </style>
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        function initial(){
            var img = $("img");
            img.addEventListener("dragstart",drag_start,false);
            img.addEventListener("drag",dra

最低0.47元/天解锁文章

猫爷001

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML5高级之拖拽drag

Web拖放 --在桌面应用程序上，可以将元素从一个位置拖放到另外一个位置，但在web上，没有一种能够实现这种操作的标准技术，从而在web上去实现这个功能并不容易--在HTML5标准引入了拖放API，从而使我们有可能开发出与桌面应用程序完全相同的web应用程序一，源元素事件执行以下方法，需要先阻止默认行为 e.preventDefault() -...
复制链接

扫一扫