原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽：
<!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">
<title>01-原生js的拖拽</title>
</head> <body>
<div></div>
<div></div>
<div></div>
<div></div>
<script> /*
粗暴的写法 */
// var div = document.createElement("div");
// Object.assign(div.style, {
// width: "100px",
// height: "100px",
// backgroundColor: "deeppink",
// position: "absolute"
// });
// document.body.appendChild(div);
// div.addEventListener("mousedown", mouseDownHandler); // var x, y;
// function mouseDownHandler(e) {
// e.preventDefault();
// x = e.offsetX;
// y = e.offsetY;
// document.addEventListener("mousemove", mouseMoveHandler);
// document.addEventListener("mouseup", mouseUpHandler);
// }
// function mouseMoveHandler(e) {
// div.style.left = e.clientX - x + "px";
// div.style.top = e.clientY - y + "px";
// }
// function mouseUpHandler(e) {
// document.removeEventListener("mousemove", mouseMoveHandler);
// document.removeEventListener("mouseup", mouseUpHandler);
// } /*
解耦的写法 */
init();
function init() {
var divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("mousedown", mouseHandler);
Object.assign(divs[i].style, {
width: "100px",
height: "100px",
backgroundColor: "deeppink",
position: "absolute"
});
}
}
function mouseHandler(e) {
if (e.type === "mousedown") {
e.preventDefault();
document.point = {
x: e.offsetX,
y: e.offsetY
};
document.div = this;
document.addEventListener("mousemove", mouseHandler);
document.addEventListener("mouseup", mouseHandler);
} else if (e.type === "mousemove") {
this.div.style.left = e.clientX - this.point.x + "px";
this.div.style.top = e.clientY - this.point.y + "px";
} else if (e.type === "mouseup") {
this.removeEventListener("mousemove", mouseHandler);
this.removeEventListener("mouseup", mouseHandler);
}
} </script>
</body> </html>
jQuery拖拽：（注意jquery.js的引入是本地相对路径，如果没有可以换成网络路径）
<!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">
<title>02-jQuery的拖拽</title>
<script src="./js/jquery.js"></script>
</head>
<body>
<script>
$("<div></div>").css({
width:"100px",
height:"100px",
backgroundColor:"deeppink",
position:"absolute"
}).mousedown(function(e){
var div=$(this);
$(document).mousemove(function(e1){
div.offset({
left:e1.clientX-e.offsetX,
top:e1.clientY-e.offsetY
});
});
$(document).mouseup(function(){
$(this).off("mousemove mouseup");
});
}).appendTo("body");
</script>
</body>
</html>
vue.js拖拽：（注意vue.js的引入是本地相对路径，如果没有可以换成网络路径）
<!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">
<title>拖拽</title>
<style>
div{
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
}
</style>
</head>
<body>
<div id="app" v-drag.l="flag"> </div>
<script src="./js/vue.js"></script>
<script>
Vue.directive("drag",(el,{modifiers,value})=>{
let {l,t}=modifiers;
el.addEventListener("mousedown",mousedownHandler);
let disX,disY;
function mousedownHandler(e){
disX=e.offsetX;
disY=e.offsetY;
document.addEventListener("mousemove",mousemoveHandler);
document.addEventListener("mouseup",mouseupHandler);
}
function mousemoveHandler(e){
let x=e.clientX-disX;
let y=e.clientY-disY;
if(!l&&!t){
el.style.left=x+"px";
el.style.top=y+"px";
return;
}
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 mouseupHandler(){
document.removeEventListener("mousemove",mousemoveHandler);
document.removeEventListener("mouseup",mouseupHandler);
}
}) let vm=new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>
原生js拖拽、jQuery拖拽、vue自定义指令拖拽的更多相关文章
- 原生JS取代一些JQuery方法的简单实现
原生JS取代一些JQuery方法的简单实现 下面小编就为大家带来一篇原生JS取代一些JQuery方法的简单实现.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 1.选 ...
- vue自定义指令(Directive中的clickoutside.js)的理解
阅读目录 vue自定义指令clickoutside.js的理解 回到顶部 vue自定义指令clickoutside.js的理解 vue自定义指令请看如下博客: vue自定义指令 一般在需要 DOM 操 ...
- Vue自定义指令使用方法详解 和 使用场景
Vue自定义指令的使用,具体内容如下 1.自定义指令的语法 Vue自定义指令语法如下: Vue.directive(id, definition) 传入的两个参数,id是指指令ID,definitio ...
- Vue自定义指令使用场景
当你第一次接触vue的时候,一定会使用到其中的几个指令,比如:v-if.v-for.v-bind...这些都是vue为我们写好的,用起来相当的爽.如果有些场景不满足,需要我们自己去自定义,那要怎么办呢 ...
- Vue | 自定义指令和动态路由实现权限控制
功能概述: 根据后端返回接口,实现路由动态显示 实现按钮(HTML元素)级别权限控制 涉及知识点: 路由守卫 Vuex使用 Vue自定义指令 导航守卫 前端工程采用Github开源项目Vue-elem ...
- vue自定义指令clickoutside使用以及扩展用法
vue自定义指令clickoutside使用以及扩展用法 产品使用vue+element作为前端框架.在功能开发过程中,难免遇到使用element的组件没办法满足特殊的业务需要,需要对其进行定制,例如 ...
- vue自定义指令clickoutside扩展--多个元素的并集作为inside
都是个人理解,如果发现错误,恳请大家批评指正,谢谢.还有我说的会比较啰嗦,因为是以自身菜鸡水平的视角来记录学习理解的过程,见谅. 1.前言 产品使用vue+element作为前端框架.在功能开发过程中 ...
- 每个人都能实现的vue自定义指令
前文 先来bb一堆废话哈哈.. 用vue做项目也有一年多了.除了用别人的插件之外.自己也没尝试去封装指令插件之类的东西来用. 刚好最近在项目中遇到一个问题.(快速点击按钮多次触发多次绑定的方法),于是 ...
- vue 自定义指令的魅力
[第1103期]vue 自定义指令的魅力 点点 前端早读课 2017-11-08 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
随机推荐
- SQL 错误: ORA-65096: 公用用户名或角色名无效 65096. 00000 - "invalid common user or role name" *Cause: An attempt was made to create a common user or role with a name
在Oracle SQL Developer中,试图创建RD用户时,出现了如下的错误: 在行: 上开始执行命令时出错 - 错误报告 - SQL 错误: ORA: 公用用户名或角色名无效 . - &quo ...
- Beyond Compare的自定义破解方法
因本人是程序员的缘故,经常时不时就是几千几万行代码找不同,也就时常要用到一个超级无敌好用的文本对比软件:Beyond Compare. 然而破解成了一大问题,网上有很多注册码都已经被封了或者是注销掉了 ...
- ICP 匹配定位算法学习记录
icp 算法原理是: 选取目标点云P和源点云Q,按照一定的约束条件,找到最邻近点(pi,qi),然后计算出最优R和t(旋转和平移), 使得误差函数最小,误差函数E(R,t): 基本算法流程: 1.在目 ...
- Windows重要的win键
win+↓ 当前窗口操作,多按几下就缩没了(同理,其他箭头也一样) win+e 打开此电脑 win+v 展开剪切板 win+k 访问蓝牙 win+a win10的通知 win+d (切到桌面,再用能切 ...
- poj-2803 Defining Moment
Defining Moment Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 1660 Accepted: 760 De ...
- sql语句将一个表的数据拷贝到另一个表中
假定有一个a表,一个b表,要将a表的数据拷贝到b表中. 1.如果a表和b表结构相同. insert into b select * from a; 2.如果a表和b表的结构不相同. insert in ...
- dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其标签关联的其他文章地址
dedecms5.7文章页的标签随机插入到内容中并且标签的地址为其他标签关联的文章地址 1 添加2个自定义函数 在dede/include/extend.func.php底部 添加如下代码 //根据文 ...
- python 排序 拓扑排序
在计算机科学领域中,有向图的拓扑排序是其顶点的先行排序,对于每个从顶点u到顶点v的有向边uv,在排序的结果中u都在v之前. 如果图是有向无环图,则拓扑排序是可能的(为什么不说一定呢?) 任何DAG具有 ...
- Flask笔记：session
session与cookie: cookie是一项浏览器的技术,而不是服务器的技术,服务器端是无法直接操作cookie的,只能通过返回Response响应告诉浏览器怎么操作cookie.而sessio ...
- Android App自动化测试实战（基于Python）（三）
1.Native App自动化测试及Appuim框架介绍 android平台提供了一个基于java语言的测试框架uiautomator,它一个测试的Java库,包含了创建UI测试的各种API和执行自动 ...