HTML5草案中增加了Drag&Drop的支持,原来以为会比较方便的实现拖拽,但事实上还是很不成熟。
先看下drag&drop的W3C草案。
传统意义上的drag&drop行为实际上是由三个鼠标事件构成的:
- mousedown
- mousemove -- 在mousedonw的同时进行mousemove,开始拖拽
- mouseup -- 拖拽结束
通常我们只需要dragStart,drag,drop这三个事件就够了,如果需要在进入drop的区域有视觉效果变化,那么最多增加dragEnter,dragLeave这两个事件就可以了。
而在这个草案中却多定义了dragover和dragend这两个几乎没有用的事件,而且必须要实现dragover这个事件,非常的不好用,可以参看The HTML5 drag and drop disasterCross Browser drag drop。
事件
描述
dragstart |
绑定在拖拽对象上,当开始拖拽时触发 |
drag |
绑定在拖拽对象上,在拖拽时触发 |
dragend |
绑定在拖拽对象上,在拖拽结束时触发 |
dragenter |
绑定在可以drop的对象上,当拖拽进到此处时触发,只在进入这个对象时触发一次。 |
drageleave |
绑定在可以drop的对象上,当拖拽离开此处时触发,只在离开这个对象时触发一次。 |
dragover |
绑定在可以drop的对象上,当拖拽在此处时触发,不管鼠标是否移动都会多次触发。 |
drop |
绑定在可以drop的对象上,在允许drop的时候触发 |
数据传递#
HTML5定义了dataTransfer对象来传递拖拽的数据,可以通过setData()和getData()来操作dataTransfer中携带的数据。
拖拽效果(drag and drop Effects)#
主要是指拖拽的时候鼠标样式。
Method
Description
dataTransfer.effectAllowed |
设置被拖拽对象允许的操作,这个值可以是copy,move,link,copyMove,copyLink,linkMove,all,none |
dataTransfer.dropEffect |
设置drop对象上允许的操作,可以是copy,move,link |
设置html dom上需要拖拽元素的dragable属性为true, 以及对应的CSS属性。
HTML:
<div class="dragElement" >dafdf</div>
<a href="#" class="dragElement" draggable="true">Cat</a>
<div class="dragElement" ></div>
<div class="dragElement" draggable="true">Bird</div>
<div class="dropElement"></div>
CSS:
.dragElement{
width:150px;
height:50px;
background:red;
float:left;
margin:5px;
}
.dropElement{
width:350px;
height:350px;
background:green;
float:right;
}
/**对于Safari,还必须要在CSS中对能拖拽的元素设置-khtml-user-drag: element*/
*[draggable = true] {
-khtml-user-drag: element;
}
在js绑定相关的事件处理函数,这里使用了JQuery的bind。
JS代码:
var dragElements = $('.dragElement');
dragElements.bind('dragstart',function(e){
e.originalEvent.dataTransfer.effectAllowed = 'move';
e.originalEvent.dataTransfer.setData('Text',this.innerHTML);
});
var dropBox = $('.dropElement');
dropBox.bind('dragover',function(e){
//设置drop可以接受的行为,能不能drop由这里的设置决定,drop事件中不处理dropEffect
e.originalEvent.dataTransfer.dropEffect = 'move';
// 必须阻止默认事件,否则无法触发drop事件
if (e.preventDefault)
e.preventDefault();
});
dropBox.bind('dragenter',function(e){
alert('dragenter');
});
dropBox.bind('dragleave',function(e){
alert('drag leave');
});
dropBox.bind('drop',function(e){
alert('drop the data:'+e.originalEvent.dataTransfer.getData('Text'));
return false;
});
测试的浏览器:Firefox3.6, IE7+, Safari4, Chrome4+
运行点这里
HTML5的drag drop有不少浏览器兼容性的问题:
1.有的浏览器拖拽时候有阴影,有的则没有,见下图
2.在IE上只能拖拽<a>,<img>这两个标签(必须存在href属性)以及选中的文字,并且不需要设置dragable=true也可以拖拽(当然这也是W3C草案中的标准)。chrome, FF, Safari则可以拖拽设置dragable=true的任意元素。
3.IE的dataTransfer不能随便设置数据名称,只能设成"Text"或"URL",而其他浏览器则没有这个限制。
4.Safari中需要用CSS指定能被拖拽的元素。
5.拖拽时候的鼠标样式不一致。
- 大小: 38.5 KB
分享到:
相关推荐
Html5DragAndDrop !1 - 拖放 HTML5 对象!2 - 获取 js 信息文件 3 - 在浏览器中加载图像 4 - Ajax 上传 5 - Gfx 上传
前端项目-angular-drag-and-drop-lists,Angular directives for sorting nested lists using the HTML5 Drag and Drop API
link href =' bower_components/draganddrop/src/draganddrop.css ' rel =' stylesheet ' type =' text/css '/>< script src =' bower_components/jquery/dist/jquery.min.js ' type =' text/javascript ' &...
博文链接:https://changsha-i9.iteye.com/blog/216918
HTML 5 drag and drop pictures
html5开发
快速开始首先,请克隆该项目并在终端中运行以下命令: $ git clone https://github.com/Big-Silver/Drag-and-Drop.git drag_drop$ cd drag_drop $ Run index.html in browser.In drag_drop.js$(document).ready...
主要为大家介绍了HTML5+CSS3实现拖放(Drag and Drop)的实现方法,需要的朋友可以参考下
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。 先点击一个小例子:在用户开始拖动 <p> 元素时执行 JavaScript 拖动我! 提示: 链接和图片默认是可拖动的,不需要 draggable 属性。 定义和用法 在拖放的...
要使用该应用程序: 克隆 repo ( ) 导航到drag-and-drop/client/目录用 Chrome 打开index.html继续开发(在 Windows 中):依赖关系git bash 新产品管理鲍尔脚步克隆 repo ( ) 在 Git Bash 中,导航到drag-and-drop...
安装npm install angular-drag-and-drop-lib 用法为了访问库指令和组件,您必须从项目中导入AngularDragAndDropLibModule 。 import { AngularDragAndDropLibModule } from 'angular-drag-and-drop-lib';...@...
Draggz-Chrome-Extension-Drag-Drop Dragg'z是一个Chrome扩展程序,它为用户提供了一种通过拖放DOM元素来修改网页结构的简便方法。 更改将保存到远程数据库中,从而使用户可以共享他们的修改。 使用的技术 Dragg'z...
* Built using native HTML5 drag and drop API * Supports * [Meteor](https://github.com/SortableJS/meteor-sortablejs) * AngularJS * [2.0+](https://github.com/SortableJS/angular-sortablejs) * [1.*]...
DragAndDrop_Kanban板玩“ Drag n'Drop”按住Ctrl键并单击(在Windows和Linux上)或按CMD键并单击(在MacOS上)以查看UI:
在HTML5中,拖拽(draganddrop)成为了标准操作,任何元素都支持。正因为这个功能太普遍了,所有的主流浏览器都支持这个操作。 启用拖拽-draggable属性 非常简单,只需要将一个元素的拖动属性修改为draggable,这个...
:尽管它似乎不支持嵌套列表( )并且不使用HTML5 Drag&Drop API(虽然取决于您的用例,这可能是一件好事,但它似乎不支持嵌套功能):很多功能并得到了很好的支持) 让我知道是否还有其他应在此处添加的库。 ...
Angularjs-DragAndDrop 和Angularjs模块一起实现HTML5拖放行为。演示阅读HTML5拖放(好奇) 为了更好地理解,请阅读: : 可拖动::指令Draggable属性必须包含将传递给droppable的模型。 例如其中myModel在父控制器...