zoukankan      html  css  js  c++  java
  • html5 的draggable属性使用<转载收藏>

    在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖动,同时也大大简化了有关于拖放方面的代码。

    实现拖放的步骤

    在HTML5中要想实现拖放操作,至少要经过两个步骤:

    1. 将想要拖放的对象元素的draggable属性设为true(draggable="true")。这样才能将该元素进行拖放。另外,img元素和a元素(必须指定href属性)默认允许拖放。
    2. 编写与拖放有关的事件处理代码。关于拖放存在的几个事件如下所示。

    拖放的相关事件

    事件 产生事件的元素 描述
    dragstart 被拖放的元素。 开始拖放操作。
    drag 被拖放的元素。 拖放过程中。
    dragenter 拖放过程中鼠标经过的元素。 被拖放的元素开始进入本元素的范围内。
    dragover 拖放过程中鼠标经过的元素。 被拖放的元素正在本元素范围内移动。
    dragleave 拖放过程中鼠标经过的元素。 被拖放的元素离开本元素的范围。
    drop 拖放的目标元素。 有其他元素被拖放到了本元素中。
    dragend 拖放的目标元素。 拖放操作结束。

    拖放示例如下,为使用方便,为jQuery增加如下函数:

    Js代码  收藏代码
    1. jQuery.fn.dragstart = function(handler) {  
    2.     return this.each(function() {  
    3.         this.addEventListener("dragstart", handler, false);  
    4.     });  
    5. };  
    6.   
    7. jQuery.fn.drag = function(handler) {  
    8.     return this.each(function() {  
    9.         this.addEventListener("drag", handler, false);  
    10.     });  
    11. };  
    12.   
    13. jQuery.fn.dragenter = function(handler) {  
    14.     return this.each(function() {  
    15.         this.addEventListener("dragenter", handler, false);  
    16.     });  
    17. };  
    18.   
    19. jQuery.fn.dragover = function(handler) {  
    20.     return this.each(function() {  
    21.         this.addEventListener("dragover", handler, false);  
    22.     });  
    23. };  
    24.   
    25. jQuery.fn.dragleave = function(handler) {  
    26.     return this.each(function() {  
    27.         this.addEventListener("dragleave", handler, false);  
    28.     });  
    29. };  
    30.   
    31. jQuery.fn.drop = function(handler) {  
    32.     var handler1 = function(event) {  
    33.         handler(event);  
    34.         event.preventDefault();  
    35.         event.stopPropagation();  
    36.     };  
    37.     return this.each(function() {  
    38.         this.addEventListener("drop", handler, false);  
    39.     });  
    40. };  
    41.   
    42. jQuery.fn.dragend = function(handler) {  
    43.     var handler1 = function(event) {  
    44.         handler(event);  
    45.         event.preventDefault();  
    46.     };  
    47.     return this.each(function() {  
    48.         this.addEventListener("dragend", handler, false);  
    49.     });  
    50. };  

    拖放操作所使用的示例HTML页面代码如下:

    Html代码  收藏代码
    1. <!DOCTYPE html>  
    2. <html lang="zh-cn" dir="ltr">  
    3.   <head>  
    4.     <meta charset="UTF-8" />  
    5.     <title>施放示例</title>  
    6.     <script type="text/javascript" src="../js/jquery-1.6.4.js"></script>  
    7.     <script type="text/javascript" src="../js/dragdrop.js"></script>  
    8.   </head>  
    9.   <body>  
    10.     <h1>简单拖放示例</h1>  
    11.     <div id="dragme" draggable="true" style="200px; border:1px solid gray; ">请施放</div>  
    12.     <div id="text" style="200px; height:200px; border:1px solid gray; "></div>  
    13.   </body>  
    14. </html>  

    进行拖放操作的JavaScript代码如下:

    Js代码  收藏代码
    1. $(function() {  
    2.     $(document).dragover(function(event) {  
    3.         event.preventDefault();  
    4.     });  
    5.   
    6.     $("#dragme").dragstart(function(event) {  
    7.         var dt = event.dataTransfer;  
    8.         dt.effectAllowed = 'all';  
    9.         dt.setData("text/plain", "Hello World.");  
    10.     });  
    11.       
    12.     $("#text").dragend(function(event) {}).drop(function(event) {  
    13.         var dt = event.dataTransfer;  
    14.         var text = dt.getData("text/plain");  
    15.         $(this).append(text);  
    16.     });   
    17. });  

    代码要点说明:

    • 开始拖动(dragstart事件发生)时,把要拖动的数据存入DataTransfer对象(setData()方法)。DataTransfer对象专门用来存放拖放时要携带的数据,它可以被设置为拖动事件对象的dataTransfer属性。setData()方法中的第一个参数为携带数据的数据各类的字符串,第二个参数为要携带的数据。第一个参数中表示数据各类的字符串里只能填入类似“text/plain”或“text/html”的表示MIME类型的文字,不能填入其他文字。
    • 如果把“dt.setData("text/plain", "Hello World.")”改为“dt.setData("text/plain", this.id)”,因为把被拖动元素的id当成了参数,所以携带的数据就是被拖动元素中的数据了,因为浏览器在使用getData()方法读取数据时会自动读取该元素中的数据。
    • 针对拖放的目标元素,必须在dragend或dragover事件内调用“event.preventDefault()”方法。因为默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理关闭。
    • 目标元素接受到被拖放的元素后,执行getData()方法从DataTransfer那里获得数据。getData()方法的参数为setData()方法中指定的数据种类。
    • 要实现拖放过程,还必须在目标元素的drop事件中关闭默认处理(拒绝被拖放),否则目标元素不能接受被拖放的元素。
    • 要实现拖放过程,还必须设定整个页面为不执行默认处理(拒绝被拖放),否则拖放处理也不能被实现。因为页面是先于其他元素接受拖放的,如果页面上拒绝拖放,则页面上其他元素就都不能接受拖放了。
    • 要使用元素可以被拖放,首先必须把该元素的draggable属性设为true。另外,为了让这个示例在所有支持拖放API的浏览器中都能正常运行,需要指定“-webkit-user-drag:element”这种Webkit特有的CSS属性。
    • 本示例中的数据种类使用了“text/plain”这个MIME类型,也可以从其他使用同样MIME类型的应用程序中把该类型的数据拖动到目标元素中。现在支持拖动处理的MIME的类型有:“text/plain(文本文字)”、“text/html(HTML文字)”、“text/xml(XML文字)”、“text/uri-list(URL列表,每个URL为一行)”。

    DataTransfer对象的属性与方法

    如果DataTransfer对象的属性和方法使用得好,可以实现定制拖放图标,让它只支持特定拖放(例如复制、移动等),甚至可以实现更复杂的拖放操作:

    • dropEffect属性:表示拖放操作的视觉效果,允许对其进行值的设定。该效果必须在用effectAllowed属性指定的允许的视觉效果的范围内,允许指定的值为none、copy、link、move。
    • effectAllowed属性:用来指定当元素被拖放时所允许的视觉效果,可以指定的值为:none、copy、copyLink、copyMove、link、linkMove、move、all、unintialize。
    • type属性:存入数据的种类,字符串的伪数组。
    • void clearData(DOMString format)方法:清除DataTransfer对象中存放的数据,如果省略参数,则清除全部数据。
    • void setData(DOMString format, DOMString data)方法:向DataTransfer对象内存入数据。
    • DOMString getData(DOMString format)方法:从DataTransfer对象中读数据。
    • void setDragImage(Element image, long x, long y)方法:用img元素来设置拖放图标(部分浏览器中可以用canvas等其他元素来设置)。

    setData()方法在拖放开始时向dataTransfer对象中存入数据,它用type属性来指定数据MIME类型,而getData()方法在拖动结束时读取dataTransfer对象中的数据。clearData()方法可以用来清除DataTransfer对象内的数据。

    设定拖放时的视觉效果

    dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示当一个元素被拖动时所允许的视觉效果,一般在ondragstart事件中设定,允许设定的值为none、copy、copyLink、copyMove、link、linkMove、move、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属性也设定了具体视觉效果,则两个具体效果值必须完全相等,否则不允许将被拖放元素拖放到目标元素中。
    Js代码  收藏代码
    1. $("#dragme").dragstart(function(event) {  
    2.     var dt = event.dataTransfer;  
    3.     dt.effectAllowed = 'copy';  
    4.     dt.setData("text/plain", "Hello.");  
    5. });  
    6.   
    7. $("#text").dragover(function(event) {  
    8.     var dt = event.dataTransfer;  
    9.     dt.dropEffect = 'copy';  
    10.     event.preventDefault();  
    11. });  

    自定义拖放图标

    除了上面所说的使用effectAllowed属性与dropEffect属性外,HTML5中还允许自定义拖放图标——指的是在用鼠标拖动元素的过程中,位于鼠标指针下部的小图标。

    DataTransfer对象有一个setDragImage()方法,该方法有三个参数,第一个参数image设定为拖放图标的图标元素,第二个参数为拖放图标离鼠标指针的x轴方向的位移量,第三个参数是拖放图标离鼠标指针的y轴方向的位移量。

    Js代码  收藏代码
      1. $('#dragme').dragstart(function(event) {  
      2.     var dt = event.dataTransfer;  
      3.     dt.setDragImage($('img').attr("src", "images/img1.jpg")[0], -10, -10);  
      4.     dt.setData("text/plain", "Welcome");  
      5. }); 
  • 相关阅读:
    java集合总结
    css基础:块级元素与行内元素
    第九周web作业:history of grammar
    正则表达式(regular expression rules)
    用indexOf查找字符出现次数
    DOM与BOM的概念
    css的单位以及调色法
    获取登录cookieColletion在cef里面打开网页
    引用CefSharp编译支持AnyCpu的办法
    解决H5移动端history.back无效
  • 原文地址:https://www.cnblogs.com/mxh1099/p/4303854.html
Copyright © 2011-2022 走看看