HTML5学习----拖拽效果

来源：互联网发布：中国科学院科学数据库编辑：程序博客网时间：2024/05/22 04:24

终于在经过一段时间之后学到了html5，可能比较笨吧，对一些东西理解起来很困难，就像昨天晚上被html5中的拖拽效果整得快要崩溃一样，所以决定在第二天记录下学习drag事件的知识：

其实现在对我们来说要做拖放效果真的很简单，因为html5专门为我们提供了API

拖放效果的前提

需要将要拖放的对象的draggable属性设置为true—-draggable = “true”;

拖放效果的一些事件

关于拖放效果的一个简单例子

下面的代码实现这样一个功能：当我用鼠标标有“拖拽我”三个字的区块，将它拖拽到紧挨在它下面的区块时，每一次拖放就会在下面那个区块上添加“Hello”。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>DragMe</title>        <script type="text/javascript">            function init(){                var source = document.getElementById("dragme");                var dest = document.getElementById("text");                source.addEventListener("dragstart",function(ev)                {                    var dt = ev.dataTransfer;                    dt.effectAllowed = 'all';                    dt.setData("text/plain","Hello");                },false);                dest.addEventListener("dragend",function(ev)                {                    //不执行默认处理（拒绝被拖拽）,在拖放结束的同时拒绝拖放，所以要关闭这个默认操作                    ev.preventDefault();                },false);                //drop被拖拽                dest.addEventListener("drop",function(ev)                {                    //从dataTransfer那里得到数据                    var dt = ev.dataTransfer;                    var text = dt.getData("text/plain");                    dest.textContent += text;                    ev.preventDefault();                    //停止事件传播                    ev.stopPropagation();                },false);            }            document.ondragover = function(e){e.preventDefault();};            document.ondrop = function(e){e.preventDefault();};        </script>    </head>    <body onload="init()">        <h1>简单拖放示例</h1>        <!--把drag属性设置为true-->        <div id="dragme" draggable="true" style="width:200px;border:1px solid gray;">        拖拽我         </div>        <div id="text" style="width:200px;height:200px;border:1px solid gray;"></div>    </body></html>

下面我们来一一解释代码中的细节

开始拖动时，把要拖动的数据存放在DataTransfer对象（用setData（）方法实现）。DataTransfer对象专门用来存放拖放时候要携带的数据。
setData方法中的第一个参数为携带数据的数据种类的字符串，有以下几种类型：
text/plain:文本文字
text/html:HTML文字
text/xml:XML文字
text/url-list:URL列表，每个URL为一行
第二个参数为要携带的数据。

source.addEventListener("dragstart",function(ev)                {                    var dt = ev.dataTransfer;                    dt.effectAllowed = 'all';                    dt.setData("text/plain","Hello");                },false);

2.针对拖放的目标元素，在这里就是下面的区块，我们需要在dragend和dragover以及drop事件内调用“事件对象.preventDefault()”方法，因为默认情况下，拖放的目标对象是不允许接受元素的，为了把元素拖放到其中，必须调用preventDefault()。当然目标元素自然包括document。

dest.addEventListener("dragend",function(ev)                {                    //不执行默认处理（拒绝被拖拽）,在拖放结束的同时拒绝拖放，所以要关闭这个默认操作                    ev.preventDefault();                },false);document.ondragover = function(e){e.preventDefault();};document.ondrop = function(e){e.preventDefault();};

3.DataTransfer对象的属性与方法：
如果DataTransfer对象的属性和方法

setData方法在拖放开始时向DataTransfer对象中存入数据，它用types属性来指定数据的MIME类型,而getData方法在拖放结束时读取DataTransfer对象中的数据。

 - 拖放时候的视觉效果：dropEffect和effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果，一般在ondragstart事件中设定，允许设定的值为:none、copy、copyLink、link、linkMove、all、unintialize。dropEffect属性表示实际拖放时候的视觉效果，一般早ondragover事件中指定，允许设定的值为：none、copy、link、move。dropEffect属性表示的实际视觉效果必须在effectAllowed属性所表示的允许的视觉效果范围内。规则如下所示：    1).如果effectAllowed属性设定为none，则不允许拖放元素；    2).如果dropEffect属性设定为none，则不允许被拖放到目标元素中；    3).如果effectAllowed属性设定为all或者不设定，则dropEffect属性允许被设定为任何值，并且按指定的视觉效果进行显示。    4).如果effectAllowed属性设定为具体效果（不为none和all），dropEffect属性也设定了具体视觉效果，则两个具体的视觉效果必须一致。以下是示例代码：

source.addEventListener("dragstart",function(e){    var dt = ev.dataTransfer;    dt.effectAllowed = 'copy';    dt.setData("text/plain","Hello);},false);dest.addEventListener("dragover",fuction(e){    var dt = ev.DataTransfer;    dt.dropEffect = 'copy';},false);

 - 自定义拖拽图标：    自定义拖拽图标就是在拖拽过程中位于鼠标下部的小图标。是使用上面提到的setDragImage方法，该方法有三个参数：（1）.设置拖放图标的图标元素；（2）.x为拖放图标离鼠标指针的x方向的位移量；（3）.拖放图标离鼠标指针y轴方向的位移量。    下面是示例代码：

//创建图标var dragicon = document.createElement('img');//设定图标来源dragicon.src = '../images/album1';source.addEventListener("dragstart",function(ev){    var dt = ev.dataTransfer;    dt.effectAllowed = 'all';    dt.setDragImage(dragicon,-10,-10);    dt.setData("text/plain",this.innerHTML);},false);

上面就是关于html5中拖放的一些知识，还有许多等着我们实践，如果你们有什么更好的想法或者关于这篇博文有什么建议希望大家都给我说让我能够有所改进。

阅读全文

0 0