HTML5Drag&DropAPI

WEB前端 waitig 486℃ 百度已收录 0评论

HTML5Drag&DropAPI

参考HTML5 drag & drop 拖拽与拖放简介

介绍

拖放API主要涉及两个元素,一个是用户用鼠标拖拽的元素,一个是被拖拽元素移动经过的元素;
1. DataTransfer 对象:拖拽对象用来传递的媒介,使用一般为Event.dataTransfer。
draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:<div title="拖拽我" draggable="true">列表1</div>
2. ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
3. ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
4. ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
5. ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
6. ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
7. Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
8. Event.effectAllowed 属性:就是拖拽的效果。

实例

首先在被拖动元素标签上加上draggable="true"

<div class="slide-bar"  draggable="true"></div>
// 假设元素A是被拖动元素,B是经过元素
// 开始拖动
A.ondragstart = function(event) {
    event.dataTransfer.setData("text", event.target.innerHTML); // Firefox必须加上这一句
    return true;
  };
// 进入元素B
B.ondragenter = function(ev) {
    // do sth.
    return true;
};
// 经过元素B
B.ondragover = function(event) {
    event.preventDefault(); // 必须
    // do sth.
    return true;
  };
// 在元素B上松开鼠标
B.ondrop = function(event) {
    //do sth.
    return false;
};

本文由【waitig】发表在等英博客
本文固定链接:HTML5Drag&DropAPI
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)