HTML5拖放接口(上)
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
浏览器支持
Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。
注释:在 Safari 5.1.2 中不支持拖放。
这篇文章简单介绍一下拖拽的几个事件;
下一篇介绍具体使用
首页搭建了一demo.html
<body>
<div class="box b-g b2">
<div class="item" draggable="true">
<span>拖拽我</span>
</div><!-- -->
</div>
<div class="box b-p b2">
</div>
</body>
demo.css
@charset "utf-8";
* {
margin: 0;
padding: 0;
transition: transform 300ms;
}
.box {
float: left;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, .3);
width: 150px;
height: 150px;
margin: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.green {
background-color: green;
}
.pink {
background-color: pink;
}
.red {
background-color: red;
}
.b-g {
border-style: solid;
border-color: green;
}
.b-r {
border-style: solid;
border-color: red;
}
.b-p {
border-style: solid;
border-color: pink;
}
.b1 {
border-width: 1px;
}
.b2 {
border-width: 3px;
}
.b3 {
border-width: 5px;
}
.item {
display: flex;
justify-content: center;
align-items: center;
width: 40%;
height: 40%;
border: 1px solid rgba(0, 0, 0, .3);
background-color: #eee;
background-image: url(http://wxhboy.com/img/n.jpg);
background-size: 100%;
}
.item:hover {
transform: translateY(-3px);
font-weight: bold;
}
span {
color: red;
font-size: 14px;
}
我用错误输出代表被拖拽元素,警告表示拖拽目标元素
被拖拽元素事件:
1. ondrag 整个拖拽过程都会调用
2. ondragstart 当拖拽开始时调用
3. ondragleave 当鼠标离开拖拽元素时调用
4. ondragend 当拖拽结束时调用
//获取第一个item
let firstItem = document.querySelector('.item');
firstItem.ondrag = (e) => {
//整个拖拽过程都会调用
console.error('被拖拽元素:ondrag|整个拖拽过程都会调用');
}
firstItem.ondragstart = (e) => {
//当拖拽开始时调用
console.error('被拖拽元素:ondragstart|当拖拽开始时调用');
//火狐浏览器需要添加这句设置数据代码(可以为null 但是必须填写)
e.dataTransfer.setData("(非空字符串)",null);
}
firstItem.ondragleave = (e) => {
//当鼠标离开拖拽元素时调用
console.error('被拖拽元素:ondragleave|当鼠标离开拖拽元素时调用');
}
firstItem.ondragend = (e) => {
//当拖拽结束时调用
console.error('被拖拽元素:ondragend|当拖拽结束时调用');
}
拖拽目标元素事件:
1. ondragenter 当拖拽元素进入时调用
2. ondragover 当停留再目标元素上时调用
3. ondrop 当在目标元素上松开鼠标时候调用
4. ondragleave 当鼠标离开元素目标时调用
//获取目标元素
let box = document.querySelectorAll('.box')[1];
box.ondragenter = (e) => {
//当拖拽元素进入时调用
console.warn('目标元素:ondragenter|当拖拽元素进入时调用');
}
box.ondragover = (e) => {
//当停留再目标元素上时调用
console.warn('目标元素:ondragover|当停留再目标元素上时调用');
// 如果想触发ondrop事件,这里需要阻止浏览器默认行为
e.preventDefault();
}
// 注意这里浏览器会阻止ondrop事件
// 我们必须找ondragover事件中阻止浏览器默认行为
box.ondrop = (e) => {
//当在目标元素上松开鼠标时候调用
console.warn('目标元素:ondrop|当在目标元素上松开鼠标时候调用')
}
box.ondragleave = (e) => {
//当鼠标离开元素目标时调用
console.warn('目标元素:ondragleave|当鼠标离开元素目标时调用')
}
最后预览: