• HTML5之画布的拖拽/拖放


    <!DOCTYPE HTML>

    <html>

    <head>

    <script type="text/javascript">

    function allowDrop(ev){

    ev.preventDeafault();

    }

    function drag(ev){

    ev.dataTranster.setData("Text",ev.target.id);

    }

    function drop(ev){

     var data=ev.dataTransfer.getData("Text");

    ev.target.appendChild(document.getElementById(data));

    ev.preventDefault();

    }

    </script>

    </head>

    <body>

    <div id ="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

    </body>

    </html>


    使得一个元素能够拖动

    很easy。仅仅须要将一个元素的拖动属性改动为draggable,例如以下:

    1. <img draggable="true" />

    怎样拖动 - ondragstart() 和 setData()方法

    然后,我们指定当一个元素拖动的时候会运行的操作。

    在上面的演示中。ondragstart属性调用了一个方法, drag(event)。这里指定了那个数据被拖动。

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

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

    在这里样例中。data type是"Text",数值是被拖动元素的ID。

    哪里去放置(drop) - ondragover

    ondragover事件指定了拖动的元素能够被放置的位置。

    缺省,数据/元素不能被drop到另外的元素。 为了同意drop,你须要先阻止缺省的处理方式。我们能够调用event.preventDefault()方法,例如以下:

    1. event.preventDefault()

    运行放置(drop)

    当可拖动的数据被drop的时候,drop事件触发。

    在上面的样例中。ondrop属性能够调用一个方法。drop(event):

    1. function drop(ev)
    2. {
    3. var data=ev.dataTransfer.getData("Text");
    4. ev.target.appendChild(document.getElementById(data));
    5. ev.preventDefault();
    6. }

    以上代码:

    • 使用dataTransfer.getData("Text")得到被拖动的数据。这种方法将会返回setData()方法中设置的不论什么数据。 
    • 被拖动的数据是能够拖动元素("drag1")的id
    • 加入可拖动的元素到放置的元素
    • 调用preventDefault()方法来阻止浏览器的缺省数据处理方式(比如,打开链接)

  • 相关阅读:
    项目功能规格说明书
    团队工作准则&贡献分配规则
    Scrum Meeting Alpha
    用户需求与NABCD分析
    团队项目选题-博客园移动客户端
    团队作业Week3
    爱情小故事
    高手遇事的处理方法,学会你也是高手
    富人思维--目标导向
    有一种失败叫瞎忙
  • 原文地址:https://www.cnblogs.com/mfrbuaa/p/5088553.html
Copyright © 2020-2023  润新知