您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:让拖放变的流行起来,详解与实例

新葡亰496net:让拖放变的流行起来,详解与实例

发布时间:2019-06-18 08:33编辑:新葡亰官网浏览(189)

    HTML5 — 让拖放变的流行起来

    2015/12/29 · HTML5 · 4 评论 · 拖放

    原文出处: 韩子迟   

    先上 Demo,尽量用 chrome,代码可参考 Github。

    在 HTML5 出现之前,页面元素的拖放需要监听 mousedown、mouseover 以及 mouseup 等一系列事件,然后改变元素的相对位置来实现这一效果。HTML DnD(Drag-and-Drop)API 的出现,使得拖放变的简单。但是由于 DnD 尚处在草案阶段,各浏览器对其规范并未统一,有些事件在不同浏览器中会出现不同效果。

    要使用 DnD,需要明确两件事情,一是需要拖动的元素,二是可放置拖动元素的位置。拖放无非是将元素从一个位置拖到另一个位置。

    HTML5 拖放(Drag 和 Drop)详解与实例代码,html5drag

    简介

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

    先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript

    <p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
    

    提示: 链接和图片默认是可拖动的,不需要 draggable 属性。

    定义和用法

    在拖放的过程中会触发以下事件:

    • 在拖动目标上触发事件 (源元素):  ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发
    • 释放目标时触发的事件:  ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
      • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
      • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
      • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

    浏览器支持

    Internet Explorer 9 , Firefox, Opera, Chrome, 和 Safari 支持拖动。

    注意:Safari 5.1.2不支持拖动;在拖动元素时,每隔 350 毫秒会触发 ondragover 事件。

    实例

    先贴代码,再逐一解释:

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML5拖拽</title>
    <meta charset="utf-8">
    <style>
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    </head>
    <body>
    <p>拖动img_w3slogo.gif图片到矩形框中:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
    
    <script>
    function allowDrop(ev){
        ev.preventDefault();
    }
    
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    
    function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    
    </script>
    </body>
    </html>
    

    拖拽前的页面效果为:

     新葡亰496net 1

    下面分别来解析下上面代码的意思。

    设置元素可拖放

    首先,为了使元素可拖动,把 draggable 属性设置为 true :

    <img draggable="true">
    

    拖动什么 - ondragstart 和 setData()

    然后,规定当元素被拖动时,会发生什么。

    在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

    dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    

    在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

    放到何处 - ondragover

    ondragover 事件规定在何处放置被拖动的数据。

    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()
    

    进行放置 - ondrop

    当放置被拖数据时,会发生 drop 事件。

    在上面的例子中,ondrop 属性调用了一个函数,drop(event):

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    

    代码解释:

    • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
    • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    • 被拖数据是被拖元素的 id ("drag1")
    • 把被拖元素追加到放置元素(目标元素)中

    实现的结果如图:

    新葡亰496net 2 

    dataTransfer对象

    在拖曳操作的过程中,我们可以用过dataTransfer对象来传输数据,以便在拖曳操作结束的时候对数据进行其他的操作。

    对象属性:

    • dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。
    • effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
    • items:该属性返回DataTransferItems对象,该对象代表了拖动数据。
    • types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。

    对象方法:

    • setData(format,data):将指定格式的数据赋值给dataTransfer对象,参数format定义数据的格式也就是数据的类型,data为待赋值的数据
    • getData(format):从dataTransfer对象中获取指定格式的数据,format代表数据格式,data为数据。
    • clearData([format]):从dataTransfer对象中删除指定格式的数据,参数可选,若不给出,则为删除对象中所有的数据。
    • addElement(element):添加自定义图标
    • setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。

    Identify what is draggable

    function dragstart_handler(ev) {
     console.log("dragStart");
     // Add the target element's id to the data transfer object
     ev.dataTransfer.setData("text/plain", ev.target.id);
    }
    
    <body>
     <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
    </body>
    

    Define the drag's data

    function dragstart_handler(ev) {
      // Add the drag data
      ev.dataTransfer.setData("text/plain", ev.target.id);
      ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
      ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
    }
    

    Define the drag image

    function dragstart_handler(ev) {
      // Create an image and then use it for the drag image.
      // NOTE: change "example.gif" to an existing image or the image 
      // will not be created and the default drag image will be used.
      var img = new Image(); 
      img.src = 'example.gif'; 
      ev.dataTransfer.setDragImage(img, 10, 10);
    }
    

    Define the drag effect

    function dragstart_handler(ev) {
      // Set the drag effect to copy
      ev.dataTransfer.dropEffect = "copy";
    }
    

    Define a drop zone

    function dragover_handler(ev) {
     ev.preventDefault();
     // Set the dropEffect to move
     ev.dataTransfer.dropEffect = "move"
    }
    function drop_handler(ev) {
     ev.preventDefault();
     // Get the id of the target and add the moved element to the target's DOM
     var data = ev.dataTransfer.getData("text");
     ev.target.appendChild(document.getElementById(data));
    }
    <body>
     <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
    </body>
    

    火狐浏览器拖拽问题

    但是进行到这儿在火狐浏览器中发现一个问题:

    html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下不管用?

    解决办法:

    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    } 
    

    或者对于上面的实例中,添加到ondrop方法里面也是可以的:

    function drop(ev){
        ev.preventDefault();
        ev.stopPropagation();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持帮客之家。

    拖放(Drag 和 Drop)详解与实例代码,html5drag 简介 拖放是一种常见的特性,即抓取对象以后拖到另一个位置。 在 HTML5 中,拖放是标准...

    简介

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

    先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript

    <p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
    

    提示: 链接和图片默认是可拖动的,不需要 draggable 属性。

    简介

    拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

    在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

    先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript

    <p draggable="true" ondragstart="myFunction(event)">拖动我!</p>
    

    提示: 链接和图片默认是可拖动的,不需要 draggable 属性。

    Drag


    首先我们需要指定要拖动的元素,设置方式很简单,给该 DOM 元素设置 draggable 属性,属性值设置为 true。比如这样:

    <code> <img src="images/0.jpg" draggable="true" id="img0"/> </code>

    1
    2
    3
    <code>
      <img src="images/0.jpg" draggable="true" id="img0"/>
    </code>

    事实上,以上代码多此一举了,页面中的图片(img)、链接(带 href 的 a 标签)以及文本默认即为可拖动。为了统一,最好还是都加上该 draggable 属性为好。

    draggable 属性还有两个值,分别是 falseauto,顾名思义,false 即设置为不可拖动,auto 即为浏览器默认值。

    当我们左键点击(按下)可拖动的 DOM 元素,轻轻移动,即触发 ondragstart 事件,该事件只会触发一次。通常我们会在 ondragstart 事件中记录正在被拖动的元素信息(ondrop 的时候好对其进行处理)。比如 demo 中记录了正在被拖动的元素 id:

    for (var i = lis.length; i--; ) { lis[i].ondragstart = function(e) { e.dataTransfer.setData('id', e.target.id); }; }

    1
    2
    3
    4
    5
    for (var i = lis.length; i--; ) {
      lis[i].ondragstart = function(e) {
        e.dataTransfer.setData('id', e.target.id);
      };
    }

    ondragstart 事件触发后,直到拖放事件结束,会一直触发 ondrag 事件。

    定义和用法

    在拖放的过程中会触发以下事件:

    • 在拖动目标上触发事件 (源元素):
      • ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发
    • 释放目标时触发的事件:
      • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
      • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
      • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
      • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

    定义和用法

    在拖放的过程中会触发以下事件:

    • 在拖动目标上触发事件 (源元素):
      • ondragstart - 用户开始拖动元素时触发
      • ondrag - 元素正在拖动时触发
      • ondragend - 用户完成元素拖动后触发
    • 释放目标时触发的事件:
      • ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
      • ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
      • ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
      • ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

    Drop


    其次我们需要明确被拖动元素可放置的位置,ondragover 事件规定在何处放置被拖动的数据。
    默认地,无法将元素放置到其他元素中,如果需要设置允许放置,我们必须阻止对元素的默认处理方式:

    var dus = document.querySelector('.dustbin'); dus.ondragover = function(e) { e.preventDefault(); };

    1
    2
    3
    4
    5
    var dus = document.querySelector('.dustbin');
     
    dus.ondragover = function(e) {
      e.preventDefault();
    };

    当元素被拖动到某一元素上时,即会触发后者的 ondrop 事件,如果需要正确触发 ondrop 事件,还需要取消一些 DnD 事件的默认行为:

    dus.ondrop = function(e) { // 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开) e.preventDefault(); e.stopPropagation(); // 兼容ff var id = e.dataTransfer.getData('id') , node = document.getElementById(id); node.parentNode.removeChild(node); };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    dus.ondrop = function(e) {
      // 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
      e.preventDefault();
      e.stopPropagation(); // 兼容ff
     
      var id = e.dataTransfer.getData('id')
        , node = document.getElementById(id);
     
      node.parentNode.removeChild(node);
    };

    有些文献中说要取消 ondragenter() 事件的默认行为,楼主在实际操作中并未发现这点。

     浏览器支持

    Internet Explorer 9 , Firefox, Opera, Chrome, 和 Safari 支持拖动。

    注意:Safari 5.1.2不支持拖动;在拖动元素时,每隔 350 毫秒会触发 ondragover 事件。

     浏览器支持

    新葡亰496net:让拖放变的流行起来,详解与实例。Internet Explorer 9 , Firefox, Opera, Chrome, 和 Safari 支持拖动。

    注意:Safari 5.1.2不支持拖动;在拖动元素时,每隔 350 毫秒会触发 ondragover 事件。

    事件


    上面已经提到了 DnD 中的三个事件,dragstartdragover 以及 drop,其实 DnD 还有几个事件,它们的发生顺序是:

    dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) -> dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) -> dragend(drag元素)

    1
    dragstart(drag元素) -> drag(drag元素) -> dragenter(drop元素) -> dragover(drop元素) -> dragleave(drop元素) -> drop(drop元素) -> dragend(drag元素)

    不难理解,拖放事件开始时触发 ondragstart 事件,当被拖动元素进入可放置的元素时,触发 ondragenter 事件(ondragenter 并不是在两个元素相交时即触发,而是该被拖拽元素在目标元素上移动一段时间后才触发),之后一段事件会持续触发 ondragover 事件(可参考 mouseover),当被拖动元素离开可放置元素的一瞬间,触发 ondragleave(和 ondragenter 对应) 事件,当松开鼠标并且被拖拽元素正好在可放置元素上时,触发 ondrop 事件,当拖放事件结束时,触发 ondragend(和 ondragstart 对应) 事件,无论拖放操作是否成功,均会触发该事件。

    实例

    先贴代码,再逐一解释:

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML5拖拽</title>
    <meta charset="utf-8">
    <style>
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    </head>
    <body>
    <p>拖动img_w3slogo.gif图片到矩形框中:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
    
    <script>
    function allowDrop(ev){
        ev.preventDefault();
    }
    
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    
    function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    
    </script>
    </body>
    </html>
    

    拖拽前的页面效果为:

    新葡亰496net 3

    下面分别来解析下上面代码的意思。

    实例

    先贴代码,再逐一解释:

    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML5拖拽</title>
    <meta charset="utf-8">
    <style>
    #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
    </style>
    </head>
    <body>
    <p>拖动img_w3slogo.gif图片到矩形框中:</p>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
    <br>
    <img id="drag1" src="images/img_w3slogo.gif" draggable="true" ondragstart="drag(event)" width="300" height="56">
    
    <script>
    function allowDrop(ev){
        ev.preventDefault();
    }
    
    function drag(ev){
        ev.dataTransfer.setData("Text",ev.target.id);
    }
    
    function drop(ev){
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    
    </script>
    </body>
    </html>
    

    拖拽前的页面效果为:

    新葡亰496net 4

    下面分别来解析下上面代码的意思。

    dataTransfer


    拖动过程中,回调函数接受的事件参数,有一个 dataTransfer 属性。它指向一个对象,包含了与拖动相关的各种信息。

    dataTransfer 对象主要有两种方法:getData() 和 setData(),需要注意的是,只有在 dragstart 以及 drop 事件中使用这两个方法。不难想象,getData() 可以取得由 setData() 保存的值。setData() 方法的第一个参数,也是 getData() 方法唯一的一个参数,是个字符串,表示保存的数据类型,取值为 ‘text’ 或 ‘URL’。IE 只定义了 ‘text’ 和 ‘URL’ 两种有效的数据类型,而 HTML5 则对此加以扩展,允许指定各种 MIME 类型。

    在拖动文本框中的文本时,浏览器会自动调用 setData() 方法,将拖动的文本以 ‘text’ 格式保存在 dataTransfer 对象中,类似地,在拖放链接或者图像时,会自动调用 setData() 将 URL 信息保存,如果有需要,在 drop 事件中可以用 getData() 读取浏览器保存的值。

    但是这似乎并没有什么卵用,我们在实际开发中多数还是对 DOM 的操作,于是多数情况下我们在 dragstart 事件处理程序中调用 setData(),手工保存自己要传输的数据,然后在 drop 事件中读取,有点像 jQuery 的 data 事件。

    设置元素可拖放

    首先,为了使元素可拖动,把 draggable 属性设置为 true :

    <img draggable="true">
    

    新葡亰496net:让拖放变的流行起来,详解与实例。设置元素可拖放

    首先,为了使元素可拖动,把 draggable 属性设置为 true :

    <img draggable="true">
    

    dropEffect 与 effectAllowed


    dropEffect新葡亰496net, 和 effectAllowed 是前面说的 dataTransfer 对象的两个属性,有啥用?简单地说,有两个用处,一是可以设置元素被拖拽时的鼠标样式,二是可以设置元素是否可被放置。

    这里我测试了三款浏览器,chrome、ff 以及 uc,chrome 和 uc 表现相似。

    一般我们将元素脱离原来的位置,鼠标手势会变成 “禁手”,直到元素被拖到可放置区域上。

    新葡亰496net 5

    但是 ff 不然,在 ff 中,元素在拖动的过程中不会显示 “禁手”。

    当元素被拖到可放置区域上时,默认鼠标手势如下。

    新葡亰496net 6

    其实通过设置 dropEffecteffectAllowed 总共能设置三种鼠标手势(move, copy,以及 link),分别如下(move 和默认貌似一样):

    新葡亰496net 7

    需要在 ondragstart 方法中设置 effectAllowed,在 ondragover 方法中设置 dropEffect。具体可以参考 demo代码。

    我们也可以对 dropEffect 和 effectAllowed 的值进行设定,让某 drop 元素只能放 move 元素,或者 copy 元素等。具体可以看下这篇,HTML5魔法堂:全面理解Drag & Drop API,讲的很好。取值也可以参考高程 484 页。

    总之要知道的是,DnD 并不会帮你完成 copy 或者 move 的任何操作,而是需要用户在 DnD 过程中,记录需要操作的对象信息,然后在 drop 事件中完成 copy 或者 move 等的操作。

    拖动什么 - ondragstart 和 setData()

    然后,规定当元素被拖动时,会发生什么。

    在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

    dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    } 
    

    在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

    拖动什么 - ondragstart 和 setData()

    然后,规定当元素被拖动时,会发生什么。

    在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

    dataTransfer.setData() 方法设置被拖数据的数据类型和值:

    function drag(ev)
    {
        ev.dataTransfer.setData("Text",ev.target.id);
    } 
    

    在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

    Tricks


    还有几个实践过程中发现的问题。

    将 Demo 在 ff 中打开,图片拖到空处,会自动在新标签中打开图片,尽管我已经在各种事件中加上了 preventDefault(),尚不清楚原因。

    如果可拖拽元素,初始在一个可放置元素内部,先把元素拖出去,再放回来,将会触发 ondrop 事件,但是 e.target 却是被拖拽的元素。如果放置在其他元素,target 会指向被放置的元素,而不是拖拽元素。这点可以通过判断 target 元素得到解决。关于这点可以看下 w3cschool 的这个 demo,打开控制台,将图片拖出去,再拖回来,控制台会打印出错误,显然代码没有考虑到这一点。


    Read More:

    • HTML 5 拖放
    • HTML5魔法堂:全面理解Drag & Drop API
    • HTML5 拖放API
    • HTML5拖放操作API及实例

      1 赞 6 收藏 4 评论

    新葡亰496net 8

    放到何处 - ondragover

    ondragover 事件规定在何处放置被拖动的数据。

    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()
    

    放到何处 - ondragover

    ondragover 事件规定在何处放置被拖动的数据。

    默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

    这要通过调用 ondragover 事件的 event.preventDefault() 方法:

    event.preventDefault()
    

    进行放置 - ondrop

    当放置被拖数据时,会发生 drop 事件。

    在上面的例子中,ondrop 属性调用了一个函数,drop(event):

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    

    代码解释:

    • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
    • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    • 被拖数据是被拖元素的 id ("drag1")
    • 把被拖元素追加到放置元素(目标元素)中

    实现的结果如图:

    新葡亰496net 9

    进行放置 - ondrop

    当放置被拖数据时,会发生 drop 事件。

    在上面的例子中,ondrop 属性调用了一个函数,drop(event):

    function drop(ev)
    {
        ev.preventDefault();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    

    代码解释:

    • 调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)
    • 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
    • 被拖数据是被拖元素的 id ("drag1")
    • 把被拖元素追加到放置元素(目标元素)中

    实现的结果如图:

    新葡亰496net 10

    dataTransfer对象

    在拖曳操作的过程中,我们可以用过dataTransfer对象来传输数据,以便在拖曳操作结束的时候对数据进行其他的操作。

    dataTransfer对象

    在拖曳操作的过程中,我们可以用过dataTransfer对象来传输数据,以便在拖曳操作结束的时候对数据进行其他的操作。

    对象属性:

    • dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。

    • effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。

    • items:该属性返回DataTransferItems对象,该对象代表了拖动数据。

    • types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。

    对象属性:

    • dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。

    • effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。

    • items:该属性返回DataTransferItems对象,该对象代表了拖动数据。

    • types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。

    对象方法:

    • setData(format,data):将指定格式的数据赋值给dataTransfer对象,参数format定义数据的格式也就是数据的类型,data为待赋值的数据

    • getData(format):从dataTransfer对象中获取指定格式的数据,format代表数据格式,data为数据。

    • clearData([format]):从dataTransfer对象中删除指定格式的数据,参数可选,若不给出,则为删除对象中所有的数据。

    • addElement(element):添加自定义图标

    • setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。

    对象方法:

    • setData(format,data):将指定格式的数据赋值给dataTransfer对象,参数format定义数据的格式也就是数据的类型,data为待赋值的数据

    • getData(format):从dataTransfer对象中获取指定格式的数据,format代表数据格式,data为数据。

    • clearData([format]):从dataTransfer对象中删除指定格式的数据,参数可选,若不给出,则为删除对象中所有的数据。

    • addElement(element):添加自定义图标

    • setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向上的距离,y设置图标与鼠标在垂直方向上的距离。

    Identify what is draggable

    function dragstart_handler(ev) {
     console.log("dragStart");
     // Add the target element's id to the data transfer object
     ev.dataTransfer.setData("text/plain", ev.target.id);
    }
    
    <body>
     <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
    </body>
    

    Identify what is draggable

    function dragstart_handler(ev) {
     console.log("dragStart");
     // Add the target element's id to the data transfer object
     ev.dataTransfer.setData("text/plain", ev.target.id);
    }
    
    <body>
     <p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
    </body>
    

    Define the drag's data

    function dragstart_handler(ev) {
      // Add the drag data
      ev.dataTransfer.setData("text/plain", ev.target.id);
      ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
      ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
    }
    

    Define the drag's data

    function dragstart_handler(ev) {
      // Add the drag data
      ev.dataTransfer.setData("text/plain", ev.target.id);
      ev.dataTransfer.setData("text/html", "<p>Example paragraph</p>");
      ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org");
    }
    

    Define the drag image

    function dragstart_handler(ev) {
      // Create an image and then use it for the drag image.
      // NOTE: change "example.gif" to an existing image or the image 
      // will not be created and the default drag image will be used.
      var img = new Image(); 
      img.src = 'example.gif'; 
      ev.dataTransfer.setDragImage(img, 10, 10);
    }
    

    Define the drag image

    function dragstart_handler(ev) {
      // Create an image and then use it for the drag image.
      // NOTE: change "example.gif" to an existing image or the image 
      // will not be created and the default drag image will be used.
      var img = new Image(); 
      img.src = 'example.gif'; 
      ev.dataTransfer.setDragImage(img, 10, 10);
    }
    

    Define the drag effect

    function dragstart_handler(ev) {
      // Set the drag effect to copy
      ev.dataTransfer.dropEffect = "copy";
    }
    

    Define the drag effect

    function dragstart_handler(ev) {
      // Set the drag effect to copy
      ev.dataTransfer.dropEffect = "copy";
    }
    

    Define a drop zone

    function dragover_handler(ev) {
     ev.preventDefault();
     // Set the dropEffect to move
     ev.dataTransfer.dropEffect = "move"
    }
    function drop_handler(ev) {
     ev.preventDefault();
     // Get the id of the target and add the moved element to the target's DOM
     var data = ev.dataTransfer.getData("text");
     ev.target.appendChild(document.getElementById(data));
    }
    <body>
     <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
    </body>
    

    Define a drop zone

    function dragover_handler(ev) {
     ev.preventDefault();
     // Set the dropEffect to move
     ev.dataTransfer.dropEffect = "move"
    }
    function drop_handler(ev) {
     ev.preventDefault();
     // Get the id of the target and add the moved element to the target's DOM
     var data = ev.dataTransfer.getData("text");
     ev.target.appendChild(document.getElementById(data));
    }
    <body>
     <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
    </body>
    

    火狐浏览器拖拽问题

    但是进行到这儿在火狐浏览器中发现一个问题:

    html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下不管用?

    解决办法:

    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    } 
    

    或者对于上面的实例中,添加到ondrop方法里面也是可以的:

    function drop(ev){
        ev.preventDefault();
        ev.stopPropagation();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    

    火狐浏览器拖拽问题

    但是进行到这儿在火狐浏览器中发现一个问题:

    html5的拖拽,用了preventDefault防止弹出新页面,但在火狐下不管用?

    解决办法:

    document.body.ondrop = function (event) {
        event.preventDefault();
        event.stopPropagation();
    } 
    

    或者对于上面的实例中,添加到ondrop方法里面也是可以的:

    function drop(ev){
        ev.preventDefault();
        ev.stopPropagation();
        var data=ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(data));
    }
    

    参考

    HTML Drag and Drop API
    DataTransfer

     

    参考

    HTML Drag and Drop API
    DataTransfer

     

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:让拖放变的流行起来,详解与实例

    关键词: