前端系列——HTML5,Vue拖拽
HTML5拖拽
使用属性draggable即可实现对于元素的拖拽
<div draggable="true" id="test1"></div>
拖拽目标触发的事件
- ondragstart: 开始拖拽触发
- ondrag: 正在拖拽触发
- ondragend: 结束拖拽触发
释放目标时触发的事件
- ondragenter:进入容器内触发
- ondragover:拖动对象在另一个对象容器范围内触发
- ondragleave:拖动对象离开容器触发
- ondrop:释放鼠标触发
阻止默认事件方法执行
Event.preventDefault()
阻止默认的些事件方法等执行。在ondragover中一 定要执行preventDefault(), 否则ondrop事件不会被触
另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,还是真的执行drop。此时需要用document的ondragover事件把它直接干掉
DataTransfer传递媒介
Event.dataTransfer()
用于保存拖动并放下过程中的数据
方法
- setData(type,data):声明所发送的数据与类型
- getData(type):返回指定类型的数据
- clearData(type):删除指定类型的数据
- setDragImage(ImageObject,x,y):设置鼠标选中图像
设置自身
event.dataTransfer().setDragImage(event.target,0,10)
设置图像
const image = new Image()
image.src = '图片位置'
event.dataTransfer().setDragImage(image,0,10)
示例代码1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#test1{
height: 50px;
width: 60px;
background-color: #ff00ff;
}
#wrap{
position: absolute;
top: 20%;
left: 200px;
height: 150px;
width: 152px;
border: 3px solid #ff00ff;
}
</style>
</head>
<body>
<div draggable="true" id="test1"></div>
<div id="wrap">
</div>
<script>
var test1 = document.getElementById('test1');
var wrap = document.getElementById('wrap');
test1.ondragstart = ()=>{
console.log('drag start')
}
test1.ondrag=()=>{
console.log('draging')
}
test1.ondragend=()=>{
console.log('drag end')
}
wrap.addEventListener('dragenter',()=>{
console.log('ondragenter')
})
wrap.addEventListener('dragover',(event)=>{
event.preventDefault()
console.log('ondragover')
})
wrap.addEventListener('dragleave',()=>{
console.log('ondragleave')
})
wrap.addEventListener('drag',()=>{
console.log('ondrag')
})
</script>
</body>
</html>
效果截图
示例代码2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#wrap1{
position: absolute;
top: 20px;
left: 20px;
height: 200px;
width: 200px;
}
ul{
height: 200px;
width: 300px;
}
li{
height: 30px;
background-color: antiquewhite;
margin: 5px;
width: 200px;
}
#wrap2{
height: 200px;
width: 300px;
position: absolute;
top: 200px;
left: 400px;
border: 2px solid #fff00f;
}
</style>
</head>
<body>
<div id="wrap1">
<ul id="u1">
<li draggable="true">1</li>
<li draggable="true">2</li>
<li draggable="true">3</li>
<li draggable="true">4</li>
</ul>
</div>
<div id="wrap2">
<ul id="ul2"></ul>
</div>
<script>
var dragItemList = document.querySelectorAll('li')
var dragItem = null
var wrap = document.getElementById('ul2')
for(let i = 0;i < dragItemList.length;i++){
dragItemList[i].ondragstart = (event)=>{
dragItem = dragItemList[i]
console.log(dragItem)
}
}
wrap.ondragover=(event)=>{
event.preventDefault()
}
wrap.ondrop=()=>{
console.log(dragItem)
wrap.appendChild(dragItem)
}
</script>
</body>
</html>
效果截图
Vue-Draggable插件拖拽
最简单的一类插件了,有一点基础的根本不用学,直接看文档
文档
安装
npm i -S vuedraggable
导入
<draggable v-model="myArray" group="people" @start="drag=true" @end="drag=false">
<div v-for="element in myArray" :key="element.id">{{element.name}}</div>
</draggable>
import draggable from 'vuedraggable'
export default {
components: {
draggable,
},