vue中拖拽div

最新推荐文章于 2024-05-15 17:05:01 发布

今年必转行

最新推荐文章于 2024-05-15 17:05:01 发布

阅读量504

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43842174/article/details/126242091

版权

<div class="drag-box" v-drag id="drag"></div>

.drag-box {
	position:absolute;
	top: 100px;
	left:100px;
 	width:100px;
    height:100px;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}

export default {
	data(){
		return {
		}
	},
	//自定义指令
	directives: {
        drag: {
            // 指令的定义
            bind: function(el) {
                let oDiv = el;  // 获取当前元素
                oDiv.onmousedown = (e) => {
                    console.log('onmousedown')
                    // 算出鼠标相对元素的位置
                    let disX = e.clientX - oDiv.offsetLeft;
                    let disY = e.clientY - oDiv.offsetTop;
 
                    document.onmousemove = (e) => {
                        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                        let left = e.clientX - disX;
                        let top &