Vue-实现简单拖拽(自定义属性)
<!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>
Vue-实现简单拖拽(自定义属性)的更多相关文章
- Vue.Draggable实现拖拽效果（采坑小记）
之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...
- 移动端多个DIV简单拖拽功能
移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...
- 基于Vue实现可以拖拽的树形表格（原创）
因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...
- Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果
探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...
- [javascript]一种兼容性比较好的简单拖拽
作为一个马上要找工作.非计算机专业.热爱前端的大四狗,最近开始疯狂写demo.看书,准备九.十月份的校招. 晚上用js实现了一个比较简单(low)的拖拽效果,初步测试兼容性还是不错的,于是写一段小博文 ...
- Unity UGUI 实现简单拖拽功能
说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...
- vue自定义事件---拖拽
margin布局拖拽 Vue.directive('drag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.qu ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- vue draggable 火狐拖拽搜索问题
最近在使用vuedraggable做导航时候,谷歌拖拽是没问题的,但是在火狐测试时候,拖拽时候是可以成功,但是火狐还是打开了一个新的tab,并且搜索了,一开始想着是阻止默认行为,但是在@end时间中阻 ...
随机推荐
- 如何在CentOS 7上安装Node.js和npm
Node.js是一个跨平台的JavaScript运行时环境,允许在服务器端执行JavaScript代码.Node.js主要用于后端,但也作为全栈和前端解决方案而流行. npm,Node软件包管理器的缩 ...
- 浏览器是怎样工作的（一）：基础知识 转载http://ued.ctrip.com/blog/how-browsers-work-i-basic-knowledge.html
译注: 前两天看到一篇不错的英文文章,叫做 How browsers work,该文概要的介绍了浏览器从头到尾的工作机制,包括HTML等的解析,DOM树的生成,节点与CSS的渲染等等,对于想学习浏览器 ...
- CentOS安装Python3.x
安装python3.6可能使用的依赖# yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqli ...
- python学习笔记(7)文件的访问与函数式编程
一.文件读写的3中方法 1.直接读入 fiel1=open('test.txt') file2=open('output.txt') while True: line=file1.readLine() ...
- 【问题解决方案】GitHub上克隆项目到本地
说明: 克隆线上项目到本地,可以直接clone克隆,不必再自己建文件夹啊,初始化啊. 命令: git clone + 想要克隆的项目的地址 END
- Python subprocess ffmpeg
# -*- coding:utf-8 -*- import os, sys, getopt import numpy as np import subprocess as sp import cv2 ...
- vue修改Element的el-table样式
修改Element中的el-table样式,可以使用以下几种方法: 1. row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style. 2. ...
- linux配置 sudo 授权管理
为什么使用 sudo,如果普通用户使用 su - root 切换到管理员.进行非法操作,比如 passwd root 修改 root 密码.那么系统其他用户将无法访问系统.这个普通管理员说白了,已经” ...
- hadoop HA架构
什么是Hadoop? http://hadoop.apache.org/ 解决问题:·海量数据的存储 (HDFS)·海量数据的分析 (MapReduce)·资源管理调度 (YARN) 集群规划:(这里 ...
- 读书笔记三、pandas之重新索引