HTML5拖动技术

来源：互联网发布：装修门户网站模板源码编辑：程序博客网时间：2024/05/16 09:26

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制作而成的插件。

1 0