vue 中基于中基于html5 drag drap的拖放效果案例分析的拖放效果案例分析
事情是这样的，右边有各种控件，可以拖动到右边自由区，在自由区内可以随意拖动。
案例一：案例一：
开始的我，so easy！ 通过绑定元素的mousedown 事件，监听鼠标的mousemove，和mouseup 事件，于是我轻松实现了同
一区域内元素可以拖着跑，上代码！
move (e) {
let odiv = e.target // 获取目标元素
// 算出鼠标相对元素的位置
let disX = e.clientX - odiv.offsetLeft
let disY = e.clientY - odiv.offsetTop
document.onmousemove = e => {
// 鼠标按下并移动的事件
// 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
let left = e.clientX - disX
let top = e.clientY - disY
// 移动当前元素
odiv.style.left = left + 'px'
odiv.style.top = top + 'px'
}
document.onmouseup = e => {
document.onmousemove = null
document.onmouseup = null
}
}
注意一点，被拖拽对象区域要设置position:relative, 否则的元素会自己抖动。
以上代码并不能满足需要，要左右布局，左边的拖到右边，在右边区域随便拖动。
案例二：案例二：
好吧，首先我来布个局，左右布局，给元素绑定事件，上代码!
<template>
<div style='position: relative;'>
<el-container>
<el-aside width="300px">
<ul>
<li class='liStyle' v-for="item in tags" :key='item.id'><img src="../assets/timg.png" class='msg' alt="" @dragstart="dragstart" draggable="true"
@drag='draging' @dragend="dragend"></li>
</ul>
</el-aside>
<!-- 自由移动区域 -->
<el-main>
<div @drop="drop" @dragover.prevent style='height:600px;width:800px;'>
</div>
<!-- <svg id="svgDrag" width="1200" height="1000"></svg> -->
</el-main>
</el-container>
</div>
</template>
事件绑定方法：
weixin_38654382
- 粉丝: 1
- 资源: 932
评论0