HTML5拖动技术

最新推荐文章于 2018-11-10 20:56:45 发布

77458

最新推荐文章于 2018-11-10 20:56:45 发布

阅读量844

点赞数 1

分类专栏： web开发之路网页项目开发学习

本文链接：https://blog.csdn.net/qq_18661257/article/details/50848453

版权

网页项目开发学习同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

web开发之路

14 篇文章 0 订阅

订阅专栏

HTML5拖动

首先明白什么是拖动

拖放即抓取对象以后将其拖到另外一个位置。

在HTML5标准中，拖动是属于其中的一部分，任何属性都可以拖动。

浏览器支持

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

拖动解析：

先提供本次解析的总代码：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>DOCUMENT</title>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        .a{
            width:10rem;
            height:10rem;
            border:1px solid black;
        }
        .b,.c{
            width:15rem;
            height:15rem;
            border:1px solid red;
            overflow-x:hidden;
            overflow-y:auto;
        }
    </style>
    <script>
        $(function(){
            $(".a")[0].ondragstart = function(e){
                console.log(e.dataTransfer);//用于研究event.dataTransfer对象
                e.dataTransfer.setData("Text", $(this).attr("class"));
            };

            $(".a")[0].ondragend = function(e){
                console.log("dragend");
            };
            $(".a")[0].ondragenter = function(e){
                console.log("dragenter");
            };
            $(".b")[0].ondrop = function(e){
                e.preventDefault();
                console.log("ondrop");
                var $i = "." + e.dataTransfer.getData("Text") +"";
                $(this).append($($i).clone());
            }
            $(".b")[0].ondragover = function(e){
                e.preventDefault();
            }
        });
    </script>
</head>
<body>
    <div class="a" draggable = "true"></div>
    <div class="b"></div>
    <div class="c"></div>
</body>
</html>

步骤：

第一步，将元素设定为可以被拖动。

通过draggable = true来设定一个元素是否被允许拖动。

<div class="a" draggable = "true"></div>

第二步，通过ondragstart()将被拖动的元素的一些信息加入event.dataTransfer对象中。

ondragstart()函数大家从这个函数的名字上就可以知道，在拖动开始的时候回触发这个函数。然后我们就需要在这个函数里面进行一些处理。

$(".a")[0].ondragstart = function(e){
    console.log(e.dataTransfer);//用于研究event.dataTransfer对象
    e.dataTransfer.setData("Text", $(this).attr("class"));
};

其中dataTransfer对象的setData便是获取一些被拖动元素的信息，以至于在放置这个元素的时候可以将它加入。

第三步，将一个元素设定为可以被放置元素。

ondragover()就这个函数名称大家可能会疑惑，拖动覆盖,其实它的意思大概是当一个元素在我的元素区域范围内时，是否允许那个拖动的元素放置在我的元素区域内。

而对于HTML5标准中，一个元素默认是不能拖动一个元素放到自己区域中来的额，所以我们要在这个函数中执行一个语句，event.preventDefault()函数会取消掉一个元素原本要进行的动作。

$(".b")[0].ondragover = function(e){
    e.preventDefault();
}

第四步，当一个元素在另外一个元素中放下时，另外一个元素应该干什么。如此就需要一个函数，ondrop()。

这个函数是在放置一个元素时触发。

$(".b")[0].ondrop = function(e){
    e.preventDefault();
    var $i = "." + e.dataTransfer.getData("Text") +"";
    $(this).append($($i).clone());
}

当然还有其他的函数。

ondragend(),当前被拖动的元素结束拖动时触发(ondrop函数发生在此函数之前)。

ondragenter(),当前被拖动的元素进入一个可以放置元素的元素时触发。

ondragleave(),当前被拖动的元素结束拖动时触发。

其中大家要注意的是，一些函数是针对哪个元素的。

针对拖动元素的函数如下：

ondragend(),ondragenter(),ondragleave(),ondragstart(),

针对被放置元素的容器的函数如下：

ondragover(),ondrop()

对于dataTransfer对象大家可以console.log打印他到控制台看看他的一些函数，这里再讲一个常用的函数那边是setDragImage()用于设定鼠标移动过程中随鼠标一起移动的效果图，这个东西的设定必须在dragstart中设置。

之后会提供一个用HTML5制作而成的插件。

77458

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5拖动技术

HTML5拖动首先明白什么是拖动拖放即抓取对象以后将其拖到另外一个位置。在HTML5标准中，拖动是属于其中的一部分，任何属性都可以拖动。浏览器支持Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。拖动解析：先提供本次解析的总代码：步骤：第一步，将元素设定为可以
复制链接

扫一扫