<!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-实现简单拖拽(自定义属性)的更多相关文章

  1. Vue.Draggable实现拖拽效果（采坑小记）

    之前有写过Vue.Draggable实现拖拽效果(快速使用)(http://www.cnblogs.com/songdongdong/p/6928945.html)最近项目中要用到这个拖拽的效果,当产 ...

  2. 移动端多个DIV简单拖拽功能

    移动端多个DIV简单拖拽功能. 这个demo与之前写的一个例子差不了多少,只是这个多了一层遍历而已. <!DOCTYPE html> <html lang="en" ...

  3. 基于Vue实现可以拖拽的树形表格（原创）

    因业务需求,需要一个树形表格,并且支持拖拽排序,任意未知插入,github搜了下,真不到合适的,大部分树形表格都没有拖拽功能,所以决定自己实现一个.这里分享一下实现过程,项目源代码请看github,插 ...

  4. Nuxt|Vue仿探探/陌陌卡片式滑动|vue仿Tinder拖拽翻牌效果

    探探/Tinder是一个很火的陌生人社交App,趁着国庆假期闲暇时间倒腾了个Nuxt.js项目,项目中有个模块模仿探探滑动切换界面效果.支持左右拖拽滑动like和no like及滑动回弹效果. 一览效 ...

  5. [javascript]一种兼容性比较好的简单拖拽

    作为一个马上要找工作.非计算机专业.热爱前端的大四狗,最近开始疯狂写demo.看书,准备九.十月份的校招. 晚上用js实现了一个比较简单(low)的拖拽效果,初步测试兼容性还是不错的,于是写一段小博文 ...

  6. Unity UGUI 实现简单拖拽功能

    说到拖拽,那必然离不开坐标,UGUI 的坐标有点不一样,它有两种坐标,一种是屏幕坐标,还有一种就是 UI 在Canvas内的坐标(暂时叫做ugui坐标),这两个坐标是不一样的,所以拖拽就需要转换. 因 ...

  7. vue自定义事件---拖拽

    margin布局拖拽 Vue.directive('drag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.qu ...

  8. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. vue draggable 火狐拖拽搜索问题

    最近在使用vuedraggable做导航时候,谷歌拖拽是没问题的,但是在火狐测试时候,拖拽时候是可以成功,但是火狐还是打开了一个新的tab,并且搜索了,一开始想着是阻止默认行为,但是在@end时间中阻 ...

随机推荐

  1. ssh1

    #coding=utf-8 import paramiko ssh = paramiko.SSHClient() #允许链接不在linux上.ssh文件中不在known_hosts文件中的主机 ssh ...

  2. 【知识强化】第七章 输入/输出系统 7.3 I/O接口

    下面我们进入第七章的第三节,I/O接口. I/O接口呢就是解决了外设和主机之间的一个连接的问题.那么我们这一节就要来看一下I/O接口它有哪些功能,以及它是怎么组成的,还有就是我们主机如何来定位到那样一 ...

  3. Python基础入门一文通 | Python2 与Python3及VSCode下载和安装、PyCharm激活与安装、Python在线IDE、Python视频教程

    目录 1. 关键词 2. 推荐阅读 2.1. 视频教程 3. 本文按 4. 安装 4.1. 视频教程 4.2. 资源下载 4.3. 安装教程 1. 关键词 Python2 与Python3及VSCod ...

  4. maven_上传到私服，以及从私服下载

    公司由于没有maven,自己又想用,于是乎,就自己搭了一个nexus 1.苦逼不多说,将本地jar文件上传到maven 需要在本机(客户端windows)中的maven中的setting.xml添加这 ...

  5. PyQt5+qtdesigner开发环境配置

    1.PyQt5安装 pip install PyQt5 2.qtdesigner安装 本来直接用pip install PyQt5-tools安装的,但是网速下的慢,中间还断了几次,在网上找到一个稳定 ...

  6. hdu 4643 GSM(暴力)

    GSM Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) Total Submis ...

  7. 记录一次 Linux crontab 执行django 脚本 失败 的经历和解决办法

    目的是想通过定时任务来执行一次数据统计,本来可以用celery来做,但是想着这个项目整个就没用到异步的地方,所以决定用crontab来做.之前做过数据库的热备份,想来用该没啥问题,但是现实打脸啪啪响. ...

  8. ltp-ddt eth_parallel_processing

    ETH_S_FUNC_PARALLEL_PROCESSING: source 'common.sh'; prepare_nfs_mount.sh "/mnt/nfs_mount"| ...

  9. IncDec Sequence （差分）

    题目地址 这道题可以用来检测一下你是否学会了差分,或者你可以更加透彻的理解差分 我们把 \(cf[]\) (差分)数组拿出了,就可以发现这道题就是每次可以在 \(cf[]\)中 选两个数,一个+1,一 ...

  10. CF dp 题(1500-2000难度)

    前言 从后往前刷 update 新增 \(\text{\color{red}{Mark}}\) 标记功能,有一定难度的题标记为 \(\text{\color{red}{红}}\) 色. 题单 (刷过的 ...