文档章节

Vue-实现简单拖拽(自定义属性)

o
 osc_zoa3moe9
发布于 2019/12/09 09:04
字数 156
阅读 20
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<title>拖拽</title>
<style>
*{
margin: 0;
padding: 0;
}
#box{
background: red;
width: 100px;
height: 100px;
position: absolute;

}
</style>

</head>
<body>
<div id="app">
<div id="box" v-drag.l.t="flag"></div>
</div>
<script>
Vue.directive("drag",(el,{modifiers,value})=>{
let{l,t}=modifiers;


el.addEventListener("mousedown",handleDownCb)

let disX,disY;
function handleDownCb(e){
disX=e.offsetX;
disY=e.offsetY;
document.addEventListener("mousemove",handleMoveCb);
document.addEventListener("mouseup",handleUpCb);
}

function handleMoveCb(e){
let x=e.clientX-disX;
let y=e.clientY-disY;
if((l&&t) && value){
el.style.left=x+"px";
el.style.top=y+"px";
return;
}

if(l&&value){
el.style.left=x+"px";
return;
}
if(t&&value){
el.style.top=y+"px";
return;
}
}

function handleUpCb(){
document.removeEventListener("mousemove",handleMoveCb);
document.removeEventListener("mouseup",handleUpCb);
}

})
let vm=new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>

o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
如何使用Vue实现拖拽效果pageY、screenY、clientY、layerY、offsetY(转)

如何使用Vue实现拖拽效果pageY、screenY、clientY、layerY、offsetY 2018年06月28日 17:34:42 唐策 阅读数:377 标签: 如何使用Vue实现拖拽效果pageY、screenY、cli 更多 个人分类: vue-js...

osc_57loaj8m
2018/12/20
4
0
可视化表单实现的技术储备

基于 Immutable.js 实现撤销重做功能 jshare jQuery拖拽表单 基于layui,自定义表单组件 基于jQuery的鼠标右键菜单 Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5 ace.js实现一个在线...

IT追寻者
01/19
53
0
基于Vue实现拖拽效果

效果图 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可...

bb7bb
2018/05/21
0
0
Vue实现拖拽升级(九宫格拖拽)

感谢参考原文-http://bjbsair.com/2020-03-27/tech-info/7202.html 前言 在本文中将会用Vue完成九宫格拖拽效果,同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入 效果实例 Demo...

曹长卿
03/27
11
0
基于Vue实现拖拽效果

效果图 分清clientY pageY screenY layerY offsetY的区别 在我们想要做出拖拽这个效果的时候,我们需要分清这几个属性的区别,这几个属性都是计算鼠标点击的偏移值,我们需要对其进行了解才可...

peakedness丶
2018/11/26
71
0

没有更多内容

加载失败,请刷新页面

加载更多

如何获取NuGet以安装/更新packages.config中的所有软件包?

问题: I have a solution with multiple projects in it. 我有一个包含多个项目的解决方案。 Most of the third party references are missing, yet there are packages.config file for e......

fyin1314
26分钟前
17
0
Xcode中的版本与版本 - Version vs build in Xcode

问题: I have an app that I developed with Xcode 3 and recently started editing with Xcode 4. In the target summary I have the iOS application target form with fields: identifie......

javail
56分钟前
14
0
如何在Python中将字典键作为列表返回? - How to return dictionary keys as a list in Python?

问题: In Python 2.7 , I could get dictionary keys , values , or items as a list: 在Python 2.7中 ,我可以将字典键 , 值或项作为列表获取: >>> newdict = {1:0, 2:0, 3:0}>>> newd......

技术盛宴
今天
17
0
2020世界人工智能大会开幕首日 百度与浦发银行达成战略合作

本文作者:y****n 7月9日,2020世界人工智能大会开幕首日,百度与浦发银行签署战略合作协议,将在人工智能、金融科技等多个领域进一步深化合作。双方将优势互补,实现人工智能技术在金融领域...

百度开发者中心
昨天
26
0
Java中C ++ Pair 的等价物是什么? - What is the equivalent of the C++ Pair in Java?

问题: Is there a good reason why there is no Pair<L,R> in Java? 有没有一个很好的理由说明Java中没有Pair<L,R> ? What would be the equivalent of this C++ construct? 这个C ++构造的......

富含淀粉
今天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部