码迷,mamicode.com
首页 > Windows程序 > 详细

Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)

时间:2016-03-31 00:27:22      阅读:1595      评论:0      收藏:0      [点我收藏+]

标签:应用程序   开发者   html5   技术   元素   

一、拖放API


WEB 拖放

    - 在桌面应用程序上,可以将元素从一个位置拖放到另一个位置,但在Web上,开发者没有一种能够实现这种操作的标准技术,从而在Web上去实现这个功能并不太容易

    - 在 HTML5 标准中引入了拖放API,从而使我们有可能开发出于桌面应用程序完全相同的 Web应用程序


源元素事件

    - 在拖放 API 中引入了一些新的事件,其中有一些元素是由源元素(拖动的元素)触发,称之为源元素事件,另一些事件由目标元素触发(源元素投放的元素)

    - 源元素事件:

        - dragstart:当拖动操作开始,触发这个事件

        - drag: 与mousemove事件相似,它是在源元素发生拖动时触发的

        - dragend:当拖动操作结束(无论是否成功)时,源元素就会触发这个事件

技术分享

技术分享

技术分享


目标元素事件

    - 下面是目标元素触发的事件

        - dragenter: 拖动操作过程中,当鼠标指针第一次进入目标元素区域时,就会触发整个事件

        - dragover: 当对象拖动到目标对象时触发

        - drop: 当拖动操作在目标元素内执行投放时,目标元素会触发这个事件

        - dragleave: 在拖动过程中,当被拖动对象离开目标对象时触发

          技术分享        

技术分享

技术分享

技术分享

技术分享



二、dataTransfer 对象


dataTransfer 对象概述

    - dataTransfer 对象提供了对于预定义的剪贴板格式的访问,以便在拖放中使用。它使用自定义处理拖放操作称为可能

    - 可以通过 dataTransfer 对象保存拖放过程中各组件所涉及到的数据


dataTransfer 对象获取方法

    - 在HTML5中,可以通过事件参数event对象获取 dataTransfer 对象

    - 代码如下:

      var transfer = e.dataTransfer;
      function mDragStart(event){
          dStart = document.getElementById("start");
          dStart.innerHTML = "Drag Start...";
          event.dataTransfer.setData("Text","http://www.alibaba.com");
      }


dataTransfer 对象方法

   - dataTransfer对象提供了一些方法用于在源元素与目标元素中共享数据

   - 方法

       - setData(type,data):用于声明所发送的数据与类型

       - getData(type): 返回指定type的数据

       - clearData(type):删除指定类型的数据

         type取值:

             Text: 保存普通文本

技术分享

技术分享


setDragImage()

   - setDragImage方法用于在拖放操作过程中,修改鼠标指针所指向的图像

   - 语法:

       event.dataTransfer.setDragImage(image,x,y);

技术分享


总结:本章内容主要介绍了下 HTML5 拖放API (拖放事件、dataTransfer对象、setDragImage方法)


本文出自 “技术交流” 博客,谢绝转载!

Html5之高级-11 拖放API (拖放事件、dataTransfer对象、setDragImage方法)

标签:应用程序   开发者   html5   技术   元素   

原文地址:http://jasonteach.blog.51cto.com/5192112/1758562

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!