HTML5新增的拖放API---(一)

HTML5新增了关于拖放的API,通过API可以让HTML页面的任意元素都变成可拖动的,通过使用拖放机制可以开发出更友好的人机交互的界面。

拖放操作可以分为两个动作:在某个元素上按下鼠标移动鼠标(没有松开鼠标),此时开始拖动;在拖动的过程中,只要没有松开鼠标,将会不断产生事件-----这个过程称为“拖”。把被拖动的元素拖动到另外一个元素上并松开鼠标-----这个过程被称为“放”。

一、启动拖放

在HTML5中,<img .../>元素默认就是可拖动的;而<a .../>元素只要设置了href属性,它默认也是 可拖动的。

对于普通的元素,如果想要让它变成可拖动的只要将该元素的draggable属性设置为true即可。但仅仅设置该元素的draggable属性还不够,因为仅仅设置了draggable=‘true‘只是表示该元素可拖动,但拖动时并未携带数据,因此用户看不到拖动的效果。

为了 让拖动操作能携带数据,应该为被拖动的元素指定ondragstart事件指定监听器,在该监听器中让拖动操作可以携带数据。

    <div style="width:150px;height:150px;background:rgba(195, 86, 246, 0.31);border:1px solid gray;"
         id="div1"
         draggable="true">
        可拖动div
    </div>
    <script type="text/javascript">
        //绑定拖动事件
        var div1 = document.getElementById(‘div1‘);
        div1.ondragstart = function (e) {
            //让拖动操作携带数据
            e.dataTransfer.setData(‘text/plain‘,‘www.baidu.com‘);
        }
    </script>

二、接受“放”

拖动时显示禁止图标,这表拖动到的“目的地”并不接受拖动的元素-----这是因为当拖动元素经过document时,document对象默认阻止了拖动事件,而其他HTML组件也位于document对象内,因此它们也不能接受“放”。

为了让document可以接受“放”,应该为documen的ondragover事件指定监听器,在监听器中取消document对拖动事件的默认行为。

document.ondragover=function(){

  //取消事件的默认行为

  return false;

}

当用户把div元素拖到指定位置释放后,Firefox浏览器默认会打开一个新页面,页面的URL正是拖放操作携带的数据。如果使用Chrome浏览器来浏览该页面,当用户把div元素拖放到指定位置释放后,Chrome浏览器并没有执行任何默认动作。

由此可见,不同浏览器对于拖放操作的默认动作并不相同,如果开发者取消拖放操作的默认动作,则可以为document的ondrop事件绑定监听器。

document.ondrop=function(e){

e.stopPropagation();
e.preventDefault();

  //取消默认行为

  return false;

}

实例:

    <a href="http://www.baidu.com" id="link1">百度首页</a>
    <script type="text/javascript">
        var link1 = document.getElementById(‘link1‘);
        //链接事件
        link1.onclick = function () {

            //实验证明,超练级的取消浏览器默认动作 return false;可行
            //取消默认操作
            return false;
        }
        //拖拽处理
        document.ondragover = function (e) {
            e.stopPropagation();
            e.preventDefault();
        }
        document.ondrop = function (e) {
            e.stopPropagation();
            e.preventDefault();

            //实验证明,在拖拽API中,火狐浏览器的取消默认操作 return false;没有起作用
            //return false;
        }
    </script>

在用户拖放HTML元素的过程中,可能触发如下事件

 事件  事件源  描述
 ondragstart  被拖动的HTML元素  开始拖动操作时触发该事件
 ondrag  被拖动的HTML元素  拖动过程中不断触发该事件
ondragend   被拖动的HTML元素  拖动结束时触发该事件 
ondragenter   拖动时鼠标经过的元素  被拖动的元素进入本元素的范围内时触发该事件 
ondragover   拖动时鼠标经过的元素  被拖动的元素进入本元素的范围内拖动时会不断触发该事件 
ondragleave   拖动时鼠标经过的元素  被拖动的元素离开本元素时触发该事件 
ondrop   拖动时鼠标经过的元素  其他元素被放到了本元素中时触发该事件 

实例:

    <div style="width:150px;height:150px;background:rgba(195, 86, 246, 0.31);border:1px solid gray;"
         id="div1"
         draggable="true">
        可拖动div
    </div>
    <script typee="text/javascript">
        var div1 = document.getElementById(‘div1‘);
        div1.ondragstart = function (e) {
            //添加携带数据
            e.dataTransfer.setData(‘text/plain‘, "www.baidu.com");
        }
        document.ondragover = function () {
            //取消默认操作
            return false;
        }
        document.ondrop = function (e) {
            //固定到指定位置,并显示携带数据
            div1.style.position = ‘absolute‘;
            div1.style.left = e.pageX + ‘px‘;
            div1.style.top = e.pageY + ‘px‘;
            div1.innerHTML = e.dataTransfer.getData(‘text/plain‘);

            //取消默认操作
            e.stopPropagation();
            e.preventDefault();
        }
    </script>

三、DataTransfer对象

拖放触发的拖放事件有一个dataTransfer属性,该属性是一个DataTransfer对象,该对象包含如下属性和方法

  • dataTransfer.dropEffect:设置或返回拖放目标上允许拖放的行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内,拖放操作将会失败。该属性只允许为"none"、“copy”、“link”和“move”四个值之一。
  • dataTransfer.effectAllowed:设置会返回被拖动元素允许发生的拖动行为。该属性值可设置为“none”、“copy”、“copyLInk”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
  • dataTransfer.items:该属性返回DataTransferItems对象,该对象代表了拖动数据。
  • dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图标,x设置图标与鼠标在水平方向的距离;y设置图标与鼠标在垂直方向的距离
  • dataTransfer.addElement(element):添加自定义图标。
  • dataTransfer.types:该属性返回一个DOMStringList对象,该对象包括了存入dataTransfer中数据的所有类型。
  • dataTransfer.getData(format):获取DataTransfer对象中format格式的数据。
  • dataTransfer.setData(format,data):向DataTransfer对象中设置format格式的数据。其中format代表数据格式,data代表数据。
  • dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据。如果省略format格式,则意味着清除DataTransfer对象中的全部数据。
  • dataTransfer.files:获取外部拖拽文件的一个类似数组的集合(length)。集合中每个元素有type属性,依次判断拖拽的文件类型。实现这个属性的浏览器有IE10+、Firefox 3.5+和Chrome。

通过DataTransfer对象,可以让拖放操作实现更丰富的功能-----开发者可以在拖放开始时(ondragstart)事件将拖放源的数据存入DataTransfer对象中,然后在拖放结束从DataTransfer对象中读取数据,这样就可以完成更复杂的错放操作了。

实例:

四、拖放行为

五、改变拖放图标

时间: 2024-10-13 01:21:26

HTML5新增的拖放API---(一)的相关文章

HTML5新增的拖放API

其实所谓的拖放就是拖动那个元素,然后就会打开一个新的页面,根据拖动元素所随带的信息来实现不同的功能.如果没有携带,则有浏览器自己来决定如何做. <body> <div id="source" style="width:80px;height:80px;border:1px solid black; background-color:#bbb;" draggable="true"> 我不想让你知道我是谁 </div&g

html5的新特性——拖放API

在HTML5之前只能使用鼠标事件模拟出"拖放"效果:HTML5专门为拖放提供了7个事件句柄.  被拖动的源对象可以触发的事件: (1)ondragstart:源对象开始被拖动 (2)ondrag:源对象被拖动过程中(鼠标可能在移动也可能未移动) (3)ondragend:源对象被拖动结束 拖动源对象可以进入到上方的目标对象可以触发的事件: (1)ondragenter:目标对象被源对象拖动着进入 (2)ondragover:目标对象被源对象拖动着悬停在上方   注意:必须组织drago

HTML5新增Canvas标签及对应属性、API详解(基础一)

知识说明: HTML5新增的canvas标签,通过创建画布,在画布上创建任何想要的形状,下面将canvas的API以及属性做一个整理,并且附上时钟的示例,便于后期复习学习!Fighting! 一.标签原型 <canvas width=”1000” height=”1000” id=”myCanvas”> 您的浏览器版本过低,不支持HTML5新增的canvas标签. </canvas> 使用js获取该画布,并指定对象 <script> Var canvasID = doc

HTML5 文件拖放API讲解

本章向大家讲解一下HTML 5中文件API与拖放API的使用方法.HTML5的文件API,可以在浏览器中直接显示客户端文件的信息或文件中的内容,而通过拖放API,可以直接将位于客户端中的文件拖动到浏览器中,也可以单独拖动页面中的元素或者元素中的内容. HTML5拖拽文件预览效果图: 在线演示 以前,我们使用file控件,单击上传按钮后选择计算机中的文件.在HTML5中,我们可以先将计算机中的文件直接拖动到浏览器中进行预览,确定文件是我们所需要的,然后单击上传按钮将该文件上传到服务器端. 我们使用

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

一.拖放API WEB 拖放 - 在桌面应用程序上,可以将元素从一个位置拖放到另一个位置,但在Web上,开发者没有一种能够实现这种操作的标准技术,从而在Web上去实现这个功能并不太容易 - 在 HTML5 标准中引入了拖放API,从而使我们有可能开发出于桌面应用程序完全相同的 Web应用程序 源元素事件 - 在拖放 API 中引入了一些新的事件,其中有一些元素是由源元素(拖动的元素)触发,称之为源元素事件,另一些事件由目标元素触发(源元素投放的元素) - 源元素事件: - dragstart:当

HTML5拖放API

拖放 拖放是一种常见的特性,即抓取对象以后拖到另一个位置. 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 浏览器支持 Internet Explorer 9.Firefox.Opera 12.Chrome 以及 Safari 5 支持拖放. 注释:在 Safari 5.1.2 中不支持拖放. 拖放步骤 1.对象元素的draggable属性设置为true(draggable="true").还需要注意的是a元素和img元素必须指定href.dragstart 被拖放的元素

HTML5新增的一些属性和功能之六——拖拽事件

拖放事件的前提是分为源对象和目标对象,你鼠标拖着的是源对象,你要放置的位置是目标对象,区分这两个对象是因为HTML5的拖放事件对两者是不同的. 被拖动的源对象可以触发的事件: 1).ondragstart:源对象开始被拖动 2).ondrag:源对象被拖动过程中(鼠标可能移动也可能不移动) 3).ondragend:源对象被拖动结束 拖动源对象可以进入到上方的目标对象可以触发的事件: 1).ondragenter:目标对象被源对象拖动着进入 2).ondragover:目标对象被源对象拖动着悬停

php 下 html5 XHR2 + FormData + File API 上传文件

FormData的作用: FormData对象可以帮助我们自动的打包表单数据,通过XMLHttpRequest的send()方法来提交表单.当然FormData也可以动态的append数据.FormData的最大优点就是我们可以异步上传一个二进制文件. 例1如下: <!DOCTYPE HTML> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>

HTML5 学习笔记(二)——HTML5新增属性与表单元素

目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placeholder占位属性 1.7.required必填属性 1.8.pattern正则属性 1.9.autofocus自动聚焦属性 1.10.autocomplete自动完成属性 1.11.novalidate不验证属性 1.12.multiple多选属性 二.HTML5表单新功能解析 2.1.表单结构更自由