原生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 前言 很多事情不能做过多的计划,因为计划赶不上变化.今日早读文章由富途@点点翻译分享. 正文从这开始- 在你初次接触一 ...
随机推荐
- RocketMQ的顺序消费和事务消费
一.三种消费 :1.普通消费 2. 顺序消费 3.事务消费 1.1 顺序消费:在网购的时候,我们需要下单,那么下单需要假如有三个顺序,第一.创建订单 ,第二:订单付款,第三:订单完成.也就是这个三个 ...
- 【shell脚本】定时备份数据库===dbbackup.sh
定时备份数据库是很有必要的 一.脚本内容 [root@localhost dbbackup]# cat dbbackup.sh #!/bin/bash #备份数据库 mysqldump -uroot ...
- 为什么Linux 普通用户在虚拟机界面可以reboot 用ssh 不能reboot
应该是有 类似的权限控制. 如果是 localhost , 那么普通用户允许重启. 如果不是localhost, 比如ssh远程的,必须验证root权限.
- Dubbo从入门到实战：入门篇
很多时候,其实我们使用这个技术的时候,可能都是因为项目需要,所以,我们就用了,但是,至于为什么我们需要用到这个技术,可能自身并不是很了解的,但是,其实了解技术的来由及背景知识,对于理解一项技术还是有帮 ...
- tf.clip_by_value
tf.clip_by_value(t, clip_value_min, clip_value_max, name=None) 功能:基于定义的min与max对tesor数据进行截断操作,目的是为了应对 ...
- thymeleaf入门
controller层添加实体 html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> ...
- Logstash：运用jdbc_streaming来丰富我们的数据
需要学习的地方:使用logstash获取数据后,然后根据这些数据再从MySQL数据库中进行匹配,增加一些数据到logstash的数据流中,然后输出到es 在IoT物联网时代,我们经常会遇到从传感器采集 ...
- Ubuntu18.04 安装 Mysql 5.7 问题
在安装完Mysql5.7后 没有让你输入的密码的时候,便会生成一个默认的密码. 生成的密码在debian.cnf 文件中 记住用户名和密码.然后去登陆 mysql -udebian-sys-maint ...
- laravel npm run dev 错误 npm run dev error [npm ERR! code ELIFECYCLE]
出现此问题是node_modules出现错误,需要执行: 1 rm -rf node_modules 2 rm package-lock.json 3 npm cache clear --force ...
- linux清屏
clear 这个命令将会刷新屏幕,本质上只是让终端显示页向后翻了一页,如果向上滚动屏幕还可以看到之前的操作信息 reset 这个命令将完全刷新终端屏幕,之前的终端输入操作信息将都会被清空,这样虽然比较 ...