原生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 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
随机推荐
- Python连载26-shelve模块
一.持久化 --shelve 持久化工具 (1)作用:类似字典,用kv对保存数据,存取方式类似于字典 (2)例子:通过一下案例创建了一个数据库,第二个程序我们读取了数据库 #使用shelve创建文件并 ...
- navcat搜索字符串方法
navcat搜索字符串方法右键点击数据库 查找字符串即可..
- git使用cherry-pick和revert抢救错误代码提交
大多数的新手在新接触git时都会出现这样的问题.代码写完了,提交到dev分支进行测试.一高兴忘记切回来,继续在dev分支开发,写完之后提交时猛的发现,我靠,我怎么在dev上面写代码,此时内心必然是一阵 ...
- 【MySQL】条件查询之排序聚合分组分页查询
排序查询 语法:order by 子句 order by 排序字段1 排序方式1 , 排序字段2 排序方式2... 排序方式: ASC:升序,默认的. DESC:降序. 注意: 如果有多个排序条件,则 ...
- SpringBoot整合kafka(实现producer和consumer)
本文代码使用的是Spring Boot 2.1.8.RELEASE 版本 <parent> <groupId>org.springframework.boot</grou ...
- 三维网格补洞算法（Poisson Method）（转载）
转载:https://www.cnblogs.com/shushen/p/5864042.html 下面介绍一种基于Poisson方程的三角网格补洞方法.该算法首先需要根据孔洞边界生成一个初始化补洞网 ...
- 斗鱼刷弹幕js代码
对于一个网络喷子(like me)来说,喷人必须高效. var script=document.createElement("script"); script.type=" ...
- 【转载】Visual Studio2017中如何设置解决方案中的某个项目为启动项目
在C#的应用程序开发过程中,一个完成的解决方案可能包含多个子项目,有时候需要设置某一个子项目为启动项目,在Visual Studio 2017集成开发工具中,设置解决方案中的某个项目为启动项目的操作方 ...
- CSS颜色、单位、文本样式
一.CSS颜色:关键字 red16进制的6位 #ffffff16进制的3位 #fffrgb(0,255,100) 取值范围:0~255 (r:red.g:green.b:blue)rgba(0,255 ...
- iOS开发 简单实现视频音频的边下边播 （转）
1.ios视频音频边缓存边播放,缓存时可以在已下载的部分拖拽进度条. 3.无论是下载到一半退出还是下载完退出,已缓存的数据都存到自己指定的一个路径.如果已下载完,下次播放时可以不再走网络,直接播放 ...